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。實作效果如下