Question

在我的JQGrid中，我有复选框列，下拉下拉菜单是通过edittype创建的：'select'和复选框是通过“自定义格式化程序”创建的，就像这个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的change回调中绑定loadComplete事件。当前代码仅将change事件绑定到页面上的现有复选框。例如，通过对网格进行排序，将重建网格内容并创建新的复选框。所以旧的绑定都不会起作用。下一个问题是由于单元格编辑而修改复选框。如果您使用复选框单击单元格，旧内容将被销毁，将在同一位置创建另一个复选框。该复选框将具有否 change绑定。用户单击另一个单元格后，将保存当前单元格。因此，编辑复选框将被销毁，并且将在与formatter: "checkbox"或formatter: checkedStateChange相同的位置创建新的复选框。结果，change事件处理程序将存在于复选框上。

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

代码中的其他问题：

使用name: 'SType', index: 'Type'是错误的，因为index值必须与使用name时的datatype: "local"值相同。当前设置无法在SType列中进行正确的排序或搜索。我严格建议您删除index

中的所有colModel属性

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

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

1 个答案: