本文概述
- 将变化事件附加到动态生成的选择元素上
- 现场例子
在某些情况下, 你将需要创建自定义的从属选择, 以执行一些代码(独立于表的数据)并在应用程序中做一些额外的事情。遗憾的是, 这是一个没有充分记录的功能, 对于某些开发人员而言, 可能需要一些时间才能最终找到将onchange回调添加到jsGrid动态生成的select元素的解决方案。
将变化事件附加到动态生成的选择元素上【如何使用jsGrid(轻量级网格jQuery插件)为依赖选择进行选择更改(onSelectChange)时附加回调】要将事件侦听器附加到jsGrid生成的元素上, 你将需要关注每个字段的* Template回调。例如, 给定一个jsGrid, 它允许你使用单个select元素(即category)插入和编辑一些数据, 我们将需要专注于insertTemplate和editTemplate。在回调内部, 你可以通过执行jsGrid.fields.select.prototype。< 视图类型> 的调用函数来检索元素, 该视图类型应在每个模板上分别替换。调用函数希望将此上下文作为插入模板上的参数。在editTemplate中, 它希望将此上下文作为第一个参数, 而将值变量作为第二个参数作为回调本身的第一个参数接收:
// Some demo data to list on the selectvar CategoryList = [{ "id": 1, "category": "Main Category A" }, { "id": 2, "category": "Main Category B" }];
// Initialize jsGrid$("#jsGrid").jsGrid({width: "100%", inserting: true, editing: true, sorting: true, paging: true, // Some dummy datadata: [{"id": 1, "category": "Category A"}], deleteConfirm: "Are you sure?", fields: [{name: "category", title: "Main Category", type: "select", items: CategoryList, valueField: "category", textField: "category", insertTemplate: function () {// Retrieve the DOM element// Note: prototype.insertTemplatevar $insertControl = jsGrid.fields.select.prototype.insertTemplate.call(this);
// Attach onchange listener !$insertControl.change(function () {var selectedValue = http://www.srcmini.com/$(this).val();
alert(selectedValue);
});
return $insertControl;
}, editTemplate: function (value) {// Retrieve the DOM element (select)// Note: prototype.editTemplatevar $editControl = jsGrid.fields.select.prototype.editTemplate.call(this, value);
// Attach onchange listener !$editControl.change(function(){var selectedValue = $(this).val();
alert(selectedValue);
});
return $editControl;
}}, { type:"control", editButton: false, modeSwitchButton: false }]});
请注意, 前面的示例仅适用于editTemplate和insertTemplate, 因此根据你使用的方式, 你可以对其他模板进行相同的操作, 例如:
headerTemplate: function() { ... }, itemTemplate: function(value, item) { ... }, filterTemplate: function() { ... }, insertTemplate: function() { ... }, editTemplate: function(value, item) { ... },
现场例子以下代码片段显示了一个实时示例, 该示例在更改选择时会触发警报(其值将显示在警报中):
编码愉快!
推荐阅读
- 如何在Ubuntu中安装和设置Android Studio
- 如何从JavaScript中的2个值计算百分比变化(增加和减少)
- 使用Mousetrap在JavaScript中添加键盘快捷键的正确方法
- 如何在Ubuntu 16.04中为PHP 7安装Imagick
- 最佳Python课程(程序员和开发人员应在2020年考虑)
- Python数据科学导论
- 如何使用PassportEye库使用Python从护照图像中检索机器可读区域
- ARM开发板 嵌入式Linux 修改开机启动LOGO
- Dynamics 365基于FetchXml的S S R S报表开发实例