【easyUI】取消easyui行點擊選中事件,智能通過勾選checkbox才能選中行
阿新 • • 發佈:2018-11-23
ets ++ 需求 .data 使用 ctr script 所有 前端
背景:項目中使用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>
【easyUI】取消easyui行點擊選中事件,智能通過勾選checkbox才能選中行