标签:UNC add str cli tin class cti 判断 win
背景:项目中使用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才能选中行
标签:UNC add str cli tin class cti 判断 win
原文地址:https://www.cnblogs.com/oldwei/p/10005929.html