如何實現我自己的「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屬性。