如何实现我自己的“onCellClick”事件处理程序

Question

在我的 JQGrid 中，我有复选框列，下拉下拉菜单是通过 edittype: 'select' 创建的，复选框是通过“custom formatter”创建的，例如这个 edittype: 'checkbox'，formatter: returnCheckBox，我想写我自己的“onChange”事件。

因此，因为我能够为复选框编写“onchange”事件并且它工作正常，但是当我单击复选框单元格中的其他位置（不在复选框上）并单击返回复选框时，它会停止触发“ onchange”事件。我认为行选择它会导致问题如何停止它。

这就是我正在做的事情

$("#theGrid").jqGrid({
            datatype: 'local',
            sortname: 'value1',
            sortorder: 'desc',
            cellsubmit: 'clientArray',
            editurl: 'clientArray',
            cellEdit: true,
            colNames: ['SName', 'SType', 'DName', 'DType', 'Nullable'],
            colModel: [
                { name: 'SName', index: 'SName', width: 100 },
                { name: 'SType', index: 'Type', width: 100 },
                {
                    name: 'DName',
                    index: 'DName',
                    width: 100,
                    editable: true,
                    edittype: 'select',
                    editoptions: { value: "1:ID;2:Name" },
                },
                {
                    name: 'DType',
                    index: 'DType',
                    width: 100,
                    editable: true,
                    edittype: 'select',
                    editoptions: { value: "1:BigInt;2:VarChar(50)" }
                },
                {
                    name: 'Nullable',
                    index: 'Nullable',
                    width: 100,
                    editable: true,
                    edittype: 'checkbox',
                    //formatter: "checkbox",
                    formatter: checkedStateChange,
                    sortable: false,
                    formatoptions: {disabled : false},
                }
            ]
        });

        var gridData = [
            { SName: 'ID', SType: 'BigInt', DName: 'ID', DType: 'BigInt' },
            { SName: 'Name', SType: 'VarChar(50)', DName: 'Name', DType: 'VarChar(50)' },

        ];

        for (var i = 0; i < gridData.length; i++) {
            $("#theGrid").jqGrid('addRowData', gridData[i].value0, gridData[i]);
        }
     function checkedStateChange(cellvalue, options, rowObject) {
            return '<input type="checkbox" class="gridCheckBox"/>';
        }
$('.gridCheckBox').on('change',function(){
alert('I am in checkBoxChange method');
});

Answer 1

您发布的代码确实有很多小问题。

change 的问题存在至少有两个原因。第一个：您必须在 jqGrid 的 loadComplete 回调中绑定到 change 事件。当前代码仅将change 事件绑定到页面上的现有 复选框。例如，通过对网格进行排序，将重建网格内容并创建新的复选框。所以所有旧的绑定都不会再工作了。下一个问题是修改复选框因为单元格编辑。如果您单击带有复选框的单元格，则旧内容将被销毁，另一个复选框将在同一位置创建。该复选框将具有 no change 绑定。用户单击另一个单元格后，当前单元格将被保存。因此，编辑复选框将被销毁，并在formatter: "checkbox" 或formatter: checkedStateChange 的相同位置创建新复选框。因此，change 事件处理程序将存在于复选框中。

我个人认为您没有任何理由将formatter: checkedStateChange（或formatter: "checkbox" 与formatoptions: {disabled : false}）一起与单元格编辑一起使用。它只会产生问题。更多的结果是使用formatter: "checkbox" without formatoptions: {disabled : false} 并且只使用afterSaveCell 单元格编辑回调而不是“onchange”事件。

代码中的其他问题：

• name: 'SType', index: 'Type' 的使用是错误的，因为index 的值必须与name 的值相同才能使用datatype: "local"。当前设置不会在SType 列中进行正确的排序或搜索。我强烈建议您从colModel 中删除所有index 属性
• 您在DType 列中使用了editoptions: { value: "1:BigInt;2:VarChar(50)" }，这似乎是错误的。正确的值应该是editoptions: { value: "BigInt:BigInt;VarChar(50):VarChar(50)" }。如果您需要使用value: "1:BigInt;2:VarChar(50)"，则输入数据应在DType 列中包含1 和2 值，并且您应另外使用formatter: "select"。
• 您可以删除colNames 选项，因为它包含的值与colModel 的name 属性的值相同。
• 您应该永远使用循环中调用的addRowData 填充网格数据。相反，您应该在创建 jqGrid 之前移动 gridData 的定义，并在网格中包含 data: gridData 选项。
• 网格没有寻呼机。尽管如此，本地寻呼仍然有效，寻呼站点为 20（它是选项 rowNum 的默认值）。使用addRowData，您可以填充更多的 es 20 行，但如果用户在开始单元格编辑之前单击列标题，则网格将被排序并且仅显示前 20 行结果。如果您想使用本地分页，您必须包含具有足够大值的rowNum 选项，例如rowNum: 10000。
• 强烈建议使用gridview: true 选项来提高网格的性能，并使用autoencode: true 选项将输入数据解释为纯数据而不是HTML 片段。它将保护您免受奇怪的错误。
• 如果您发布的colModel 已满，则选项sortname: 'value1' 错误，因为输入数据不包含value1 属性。