EasyUI带选择框的DataGrid实现点击行"不选中或取消选中"的解决方法。

时间:2015-03-14 16:40:33   收藏:0   阅读:35096

 

 1 var IsCheckFlag = true; //标示是否是勾选复选框选中行的,true - 是 , false - 否
 2 $("#dg").datagrid({
 3     rownumbers:true,
 4     url: LeadsData.ashx?o=list,
 5     method:get,
 6     fit: true,
 7     striped:true,
 8     pagination: true,
 9     fitColumns: true,
10     checkOnSelect: false,
11     selectOnCheck: true,
12     pageSize: 15,//每页显示的记录条数,默认为10 
13     pageList: [15, 30, 45],//可以设置每页记录条数的列表
14     onLoadSuccess: function (data) {
15         AddTipForStar();
16     },
17     onClickCell: function (rowIndex, field, value) {
18         IsCheckFlag = false;
19     },
20     onSelect: function (rowIndex, rowData) {
21         if (!IsCheckFlag) {
22             IsCheckFlag = true;
23             $("#dg").datagrid("unselectRow", rowIndex);
24         }
25     },                    
26     onUnselect: function (rowIndex, rowData) {
27         if (!IsCheckFlag) {
28             IsCheckFlag = true;
29             $("#dg").datagrid("selectRow", rowIndex);
30         }
31     }
32 });

  

主要代码就是粗体的部分。

 
解决思路为,用一个标识变量来保存是否点击了单元格,如果点击了单元格则此操作不是通过复选框操作的,标识设为false。在选中和取消选中事件中判断操作来源,即IsCheckFlag的值。如果为false,选中操作执行取消选中,取消选中操作执行选中。执行之前默认把标识值设为默认值,如果是复选框操作,是不触发 onClickCell 事件的,也就是标识值会是true。
 
需要注意的就是
 
IsCheckFlag = true;
$("#dg").datagrid("unselectRow", rowIndex);
 
这两句的先后顺序。
 
如果把 IsCheckFlag = true放在下面,会形成类似死循环的情况。因为 $("#dg").datagrid("unselectRow", rowIndex); 这个事件会直接触发 onUnselect事件,而 IsCheckFlag = true; 没有执行。依次执行便会成为死循环。
评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!