EasyUIdatagrid实现翻页保持选中状态

转载自：http://blog.csdn.net/junlong750/article/details/51470834

1、首先设置datagrid属性的idField主键，这里假如为id，若idField为其他的，记住下面的代码里的 id也要做相应的修改

2、建立一个全局的Javascript数组var checkedItems = []，用来存放选中checkbox的值。

3、核心方法，addcheckItem()、removeAllItem(rows)、removeSingleItem(rowIndex, rowData)当选中或者取消checkbox时触发

　   用来将checkbox的主键值保存在checkedItems数组，或者从数组中删除对应的id值，findCheckedItem(ID)这个函数用来查找数组中

　　是否存在checkbox的值，存在则返回id值，不存在则返回-1.

4、什么时候调用这些方法呢？分别在datagrid的 onCheckAll: addcheckItem,onCheck: addcheckItem,onUncheckAll: removeAllItem,onUncheck: removeSingleItem 这四个事件中

　　调用对应的方法。

5、翻页后如何给checkbox赋值呢？关键就在这里，datagrid重写了$.fn.datagrid.defaults.view的onAfterRender事件，

　　因此在datagrid的view事件里绑定这个函数就OK了。onAfterRender事件是当easyui的元素渲染完毕后执行的事件，在这里会调用手写的ischeckItem函数来实现对checkbox的赋值！

6、代码展示

[html] view plain copy print?

1. <%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>  
2. <%@ include file="/pageHead.jsp" %>  
3. <%@page import="com.iss.itreasury.common.utils.SysConstant"%>  
4.   
5. <script type="text/Javascript">  
6.     document.onkeydown = function(e) {  
7.     var e = e || event;  
8.     if(e.keyCode == 13) {  
9.     setTimeout(function(){  
10.                $('#success').val("");  
11.             },0);  
12.             e.preventDefault ? e.preventDefault() : (e.returnValue = false);  
13.         }  
14.     }     
15.       
16.       
17.       
18.     $(function(){     
19.         $("#hid").hide();   
20.           
21.         $("#allpeople").change(function () {    
22.             var aaa = $("#allpeople  option:selected").text();    
23.             if(aaa == "所有人"){  
24.                 //$('#dg2').datagrid('clearSelections');  
25.                 $('#dg2').datagrid('reload');  
26.                 $("#hid").hide();   
27.             }else{  
28.                 //$('#dg2').datagrid('clearSelections');  
29.                 $('#dg2').datagrid('reload');  
30.                 $("#hid").show();   
31.             }  
32.         });  
33.           
34.         var fileview = $.extend({}, $.fn.datagrid.defaults.view, { onAfterRender: function (target) { ischeckItem(); } });  
35.   
36.         var checkedItems = [];  
37.         function ischeckItem() {  
38.             for (var i = 0; i < checkedItems.length; i++) {  
39.                 $('#dg2').datagrid('selectRecord', checkedItems[i]); //根据id选中行   
40.             }  
41.         }  
42.           
43.         function findCheckedItem(ID) {  
44.             for (var i = 0; i < checkedItems.length; i++) {  
45.                 if (checkedItems[i] == ID) return i;  
46.             }  
47.             return -1;  
48.         }  
49.   
50.          function addcheckItem() {  
51.             var row = $('#dg2').datagrid('getChecked');  
52.             for (var i = 0; i < row.length; i++) {  
53.                 if (findCheckedItem(row[i].id) == -1) {  
54.                     checkedItems.push(row[i].id);  
55.                 }  
56.             }  
57.          }  
58.          function removeAllItem(rows) {  
59.   
60.             for (var i = 0; i < rows.length; i++) {  
61.                 var k = findCheckedItem(rows[i].id);  
62.                 if (k != -1) {  
63.                     checkedItems.splice(i, 1);  
64.                 }  
65.             }  
66.          }  
67.          function removeSingleItem(rowIndex, rowData) {  
68.             var k = findCheckedItem(rowData.id);  
69.             if (k != -1) {  
70.                 checkedItems.splice(k, 1);  
71.             }  
72.          }  
73.           
74.         $('#dg2').datagrid({  
75.             idField: 'id',   
76.             view: fileview,  
77.             method: 'post',  
78.             //title: '用户列表',  
79.             width: '1000',  
80.             height: '325',  
81.             fitColumns: true,  
82.             singleSelect: true,  
83.             pagination: true,  
84.             url:'${systemctx}/userManager/userQuery.json',  
85.             pageSize: 15,  
86.             pageList: [ 20, 50, 100],  
87.             queryParams: formToJson("pageform"),  
88.             rownumbers:true,  
89.             singleSelect:false,  
90.             columns:[[  
91.                 {field:'id',title:' ',checkbox:true,align:'center'},  
92.                 {field:'username',title:'用户名',width:'15%'},  
93.                 {field:'realname',title:'真实姓名',width:'15%'},  
94.                 {field:'roleName',title:'角色',width:'15%'},  
95.                 {field:'mobilePhone',title:'移动电话',width:'15%',align:'center'},  
96.                 {field:'email',title:'电子邮件',width:'20%'},  
97.                 {field:'sexName',title:'性别',width:'5%',align:'center'}  
98.             ]],  
99.             toolbar:[],  
100.             onCheckAll:function(rows){  
101.                 addcheckItem();  
102.             },  
103.             onCheck:function(rowIndex,rowData){  
104.                 addcheckItem();  
105.             },  
106.             onUncheckAll:function(rows){  
107.                 removeAllItem(rows);  
108.             },  
109.             onUncheck:function(rowIndex,rowData){  
110.                 removeSingleItem(rowIndex,rowData);  
111.             }  
112.         });  
113.         //将查询项放入工具栏中  
114.         //$('#tb').insertBefore("table:first",'.datagrid-toolbar');  
115.     });  
116.       
117.       
118.   
119.     function saveInstant(){  
120.           
121.     }  
122.       
123.       
124. script>  
125.   
126.     <form id="pageform" class="easyui-form" method="POST" data-options="novalidate:true">  
127.         <div class="pageBody">  
128.             <table  class="tableFrom">  
129.                 <tr>  
130.                     <th>推送标题:th>  
131.                     <td><input id="title" class="iss_text" name="title" data-options="required:true"/>td>  
132.                 tr>  
133.                 <tr>  
134.                     <th>推送内容:th>  
135.                     <td><textarea rows="8" cols="60" id="content" name="content" maxlength="150">textarea>td>  
136.                 tr>  
137.                 <tr>        
138.                     <th>广播（所有人）:th>  
139.                     <td>  
140.                         <select panelheight="auto" name="allpeople" id="allpeople" style="width:142px; width:185px\9;">  
141.                             <option value="1">所有人option>  
142.                             <option value="2">自定义option>  
143.                         select>  
144.                     td>   
145.                 tr>               
146.                 <tr id="hid">       
147.                     <th>接收人：th>  
148.                     <td >   
149.                         <table id="dg2" width="100%" height="100%">table>       
150.                     td>   
151.                 tr>  
152.                 <tr>  
153.                     <td colspan="2" class="t-r">  
154.                         <input type="button" class="button" onclick="saveInstant()" value="保存"/>  
155.                         <input value="取消" type="button" class="button" onclick="$.closeWindow('dg');"/>  
156.                     td>  
157.                 tr>  
158.             table>  
159.         div>  
160.     form>  

7、效果展示