1. 程式人生 > >【easyUI】取消easyui行點選選中事件,智慧通過勾選checkbox才能選中行

【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>