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

Question

在我的JQGrid中，我有复选框的列和下拉下拉通过编辑类型创建：'选择'和复选框通过“自定义格式化程序”创建像这样edittype：'复选框'，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是因为至少有两个原因。第一个：你必须绑定到change事件里面的loadComplete回调jqGrid。当前代码绑定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值必须是相同的使用datatype: "local"的情况下name值。当前的设置不会在列SType中进行正确排序或搜索。我严格推荐您从colModel
• 您在DType列其中seend是错误的使用editoptions: { value: "1:BigInt;2:VarChar(50)" }删除所有index性能。正确的值应该是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您可以填充更多的行，但如果用户在开始编辑单元格之前单击列标题，则网格将被排序，并且只显示结果的前20行。如果你想使用本地分页，你必须包含rowNum选项，并有足够大的值，如rowNum: 10000。
• 严格建议使用gridview: true选项来提高网格的性能，并使用autoencode: true选项将输入数据解释为纯数据而不是HTML片段。它会保护你免受奇怪的错误。
• 如果您发布的colModel已满，则选项sortname: 'value1'错误，因为输入数据不包含value1属性。