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; 没有执行。依次执行便会成为死循环。