如何使用jsGrid(轻量级网格jQuery插件)为依赖选择进行选择更改(onSelectChange)时附加回调

本文概述

将变化事件附加到动态生成的选择元素上
现场例子

jsGrid是基于jQuery的轻量级客户端数据网格控件。它支持基本的网格操作, 如插入, 过滤, 编辑, 删除, 分页和排序。 jsGrid灵活, 可以自定义其外观和组件。它有据可查, 并且有很多可用的选项可以更改和修改jsGrid以满足你的需求。
在某些情况下, 你将需要创建自定义的从属选择, 以执行一些代码(独立于表的数据)并在应用程序中做一些额外的事情。遗憾的是, 这是一个没有充分记录的功能, 对于某些开发人员而言, 可能需要一些时间才能最终找到将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) { ... },

现场例子以下代码片段显示了一个实时示例, 该示例在更改选择时会触发警报(其值将显示在警报中)：
编码愉快！