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: ,//每頁顯示的記錄條數，默認爲
     pageList: [, , ],//能夠設置每頁記錄條數的列表
     onLoadSuccess: function (data) {
         AddTipForStar();
     },
     onClickCell: function (rowIndex, field, value) {
         IsCheckFlag = false;
     },
     onSelect: function (rowIndex, rowData) {
         if (!IsCheckFlag) {
             IsCheckFlag = true;
             $("#dg").datagrid("unselectRow", rowIndex);
         }
     },                   
     onUnselect: function (rowIndex, rowData) {
         if (!IsCheckFlag) {
             IsCheckFlag = true;
             $("#dg").datagrid("selectRow", rowIndex);
         }
     }
 });

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

 

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

 

須要注意的就是

 

IsCheckFlag = true;

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

 

這兩句的前後順序。

 

若是把 IsCheckFlag = true放在下面，會造成相似死循環的狀況。由於 $("#dg").datagrid("unselectRow", rowIndex); 這個事件會直接觸發 onUnselect事件，而 IsCheckFlag = true; 沒有執行。依次執行便會成爲死循環。