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

本文概述

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

jsGrid是基于jQuery的轻量级客户端数据网格控件。它支持基本的网格操作, 如插入, 过滤, 编辑, 删除, 分页和排序。 jsGrid灵活, 可以自定义其外观和组件。它有据可查, 并且有很多可用的选项可以更改和修改jsGrid以满足你的需求。

在某些情况下, 你将需要创建自定义的从属选择, 以执行一些代码(独立于表的数据)并在应用程序中做一些额外的事情。遗憾的是, 这是一个没有充分记录的功能, 对于某些开发人员而言, 可能需要一些时间才能最终找到将onchange回调添加到jsGrid动态生成的select元素的解决方案。

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

要将事件侦听器附加到jsGrid生成的元素上, 你将需要关注每个字段的* Template回调。例如, 给定一个jsGrid, 它允许你使用单个select元素(即category)插入和编辑一些数据, 我们将需要专注于insertTemplate和editTemplate。在回调内部, 你可以通过执行jsGrid.fields.select.prototype。<视图类型>的调用函数来检索元素, 该视图类型应在每个模板上分别替换。调用函数希望将此上下文作为插入模板上的参数。在editTemplate中, 它希望将此上下文作为第一个参数, 而将值变量作为第二个参数作为回调本身的第一个参数接收：

// Some demo data to list on the select
var 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 data
    data: [
        {
            "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.insertTemplate
                var $insertControl = jsGrid.fields.select.prototype.insertTemplate.call(this);

                // Attach onchange listener !
                $insertControl.change(function () {
                    var selectedValue = $(this).val();

                    alert(selectedValue);
                });

                return $insertControl;
            }, editTemplate: function (value) {
                // Retrieve the DOM element (select)
                // Note: prototype.editTemplate
                var $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) { ... }, 

现场例子

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

编码愉快！