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