【easyUI】取消easyui行點擊選中事件，智能通過勾選checkbox才能選中行

背景：項目中使用easyui作為前端架子。datagrid默認是點擊行就選中此行然后變色。

需求：點擊行不讓此行選中；只能通過點擊復選框才能選中某一行。

解決思路：

　　1、寫點擊行函數function onClickRow(rowIndex,rowData){}

　　2、查詢當前datagrid所有選中行。

　　3、遍歷選中行。對比選中行索引和點擊行的索引：如果點擊行的索引在所有選中行中，則取消點擊行的選中狀態；如果不存在，則選中點擊行。

代碼：

<script type="text/javascript">
    // 行點擊事件 
    function rowClick(rowIndex,rowData){
        var rows = $("#datagrid").datagrid('getSelections');
        var tag = true;
        // 判斷是否剛剛選中 
        for(var i = 0;i<rows.length;i++){
            // 所有選中行中存在剛剛點擊的行 則取消選中 
            if($('#datagrid').datagrid('getRowIndex', rows[i])==rowIndex){
                // 取消選中此行 
                $('#datagrid').datagrid('unselectRow',rowIndex);
                tag = false;
                break;
            }
        }
        // 判斷是否剛剛取消
        if(tag){
            $('#datagrid').datagrid('selectRow',rowIndex);
        }
    }
</script>

延伸：

　　在解決這個問題的時候看到js中Set對象的使用。如果使用Set對象，上面的代碼則變成下面這樣：

使用Set對象(此情景並不適用Set對象，為以后使用打下基礎吧)

<script type="text/javascript">
    // 行點擊事件 
    function rowClick(rowIndex,rowData){
        var rows = $("#datagrid").datagrid('getSelections');
        var set = new Set();
        // 判斷是否剛剛選中 
        for(var i = 0;i<rows.length;i++){
            var currentIndex = $('#datagrid').datagrid('getRowIndex',rows[i]);
            set.add(currentIndex);
            // 所有選中行中存在剛剛點擊的行 則取消選中 
            if(currentIndex==rowIndex){
                // 取消選中此行 
                $('#datagrid').datagrid('unselectRow',rowIndex);
            }
        }
        // 判斷是否剛剛取消
        if(!set.has(rowIndex)){
            $('#datagrid').datagrid('selectRow',rowIndex);
        }
    }
</script>