easyUI 复选框多选，单元行单选（类似邮箱界面操作）

今天项目需要实现在前台用easyUi datagrid实现 点击行文本单选，点击复选框多选的功能，参考了网上的实现方式，并不能实现我所要的，于是自己写了这部分逻辑，代码如下：

参数设置：singleSelect:false允许多选，checkOnSelect,sekectOnSelect不需要设置，默认为true

<table id="tt" class="easyui-datagrid" 
data-options="iconCls:'icon-edit',singleSelect: false,pagination:true,idField:'rowId',rownumbers:true
>
           

点击文本单元行为：

var tmpIndex = ;//行序变量，这里将行序变量设为可操作的值，不要设置为负数，行序变量第一行为0，可设为0以上可操作的值 
$('#tt').datagrid({
onClickRow: function (rowIndex, rowData) {
//点击行文本                 
    if(rowIndex!=tmpIndex){//如果点击行行序列号不等于行序变量，选中点击行，取消行序变量所在行 
    $(this).datagrid('unselectRow', tmpIndex); 
    tmpIndex = rowIndex;//将当前选择行序数值赋给行序变量
    }else{//如果初始选择行为1，直接选中1，不选中执行上面条件，不选中1。行只允许选中，连续点击此行不能取消。能取消的逻辑尚未实现，各位朋友可以尝试实现。
    $(this).datagrid('selectRow', rowIndex);
    }
}
});
           

代码存在部分缺陷，单用复选框多选后，点击行无法实现取消多选并单独选择此行。

—————————–16.12.22 时间戳————————————————-

更新

修改缺陷，完美实现复选框多选，单元行单选的问题。 参考博客地址

var isCheckFlag = true;
$('#tt').datagrid({onClickCell:function(rowIndex,field,value){
    isCheckFlag = false;
},
onSelect:function(rowIndex,rowData){
    if(!isCheckFlag){
        $(this).datagrid('unselectAll');
        isCheckFlag = true;
        $(this).datagrid('selectRow', rowIndex);
        }
},
onUnselect:function(rowIndex,rowData){
    if(!isCheckFlag) {
    isCheckFlag = true;
    $(this).datagrid('unselectRow', rowIndex);
    }
}
});
           

这里data-options的设置不变，允许多选，checkOnSelect,sekectOnSelect不需要设置，默认为true。实现效果如下