EasyUI帶選擇框的DataGrid實現點擊行"不選中或取消選中"的解決方法。

 

var IsCheckFlag = true; //標示是否是勾選復選框選中行的，true - 是 , false - 否
$("#dg").datagrid({
    rownumbers:true,
    url: 'LeadsData.ashx?o=list',
    method:'get',
    fit: true,
    striped:true,
    pagination: true,
    fitColumns: true,
    checkOnSelect: false,
    selectOnCheck: true,
    pageSize: 15,//每頁顯示的記錄條數，默認為10 
    pageList: [15, 30, 45],//可以設置每頁記錄條數的列表
    onLoadSuccess: function (data) {
        AddTipForStar();
    },
 onClickCell: function (rowIndex, field, value) { 18 IsCheckFlag = false; 19  }, 20  onSelect: function (rowIndex, rowData) { 21 if (!IsCheckFlag) { 22 IsCheckFlag = true; 23 $("#dg").datagrid("unselectRow", rowIndex); 24  } 25  }, 26  onUnselect: function (rowIndex, rowData) { 27 if (!IsCheckFlag) { 28 IsCheckFlag = true; 29 $("#dg").datagrid("selectRow", rowIndex); 30  } 31  } 32 });

  

主要代碼就是粗體的部分。

 

解決思路為，用一個標識變量來保存是否點擊了單元格，如果點擊了單元格則此操作不是通過復選框操作的，標識設為false。在選中和取消選中事件中判斷操作來源，即IsCheckFlag的值。如果為false，選中操作執行取消選中，取消選中操作執行選中。執行之前默認把標識值設為默認值，如果是復選框操作，是不觸發 onClickCell 事件的，也就是標識值會是true。

 

需要注意的就是

 

IsCheckFlag = true;

$("#dg").datagrid("unselectRow", rowIndex);

 

這兩句的先后順序。

 

如果把 IsCheckFlag = true放在下面，會形成類似死循環的情況。因為 $("#dg").datagrid("unselectRow", rowIndex); 這個事件會直接觸發 onUnselect事件，而 IsCheckFlag = true; 沒有執行。依次執行便會成為死循環。