EasyUI多选，easyui datagrid 分页并保持checkbox选中状态

最近在使用EasyUI制作一个多选的功能，查找了很多资料，有几个说的不是很全，所以就尝试去写，今天终于弄出来了，就把完整的代码 贴出来，部门也是参照前人所说：

第一步：JSP页面

①在data-options需要设置的属性或方法：idField: 'EMPLOYEE_UUID', view: fileview,
onCheckAll:addcheckItem,onCheck:addcheckItem,onUncheckAll:removeAllItem,onUncheck: removeSingleItem,

设置datagrid属性的idField主键--唯一主键---checkbox的field 随意设置，只要不是后台传来的字段

<table id="ttemp" data-options="iconCls:'myicon-table',fitColumns:true,rownumbers:true,toolbar:'#tbemp',
				pageSize:10,pagination:'true',pageList:[10,20,50,100], url:'agentsmanage_findEmployeePerson.do',idField: 'EMPLOYEE_UUID', view: fileview,
				onCheckAll: addcheckItem,onCheck:addcheckItem,onUncheckAll: removeAllItem,onUncheck: removeSingleItem,remoteSort:true">
				<thead>
					<tr>
					 <th data-options="field:'k',checkbox:true,width:20"></th>
					<th data-options="field:'EMPLOYEE_UUID',hidden:'true'">人员UUID</th>
					<th data-options="field:'EMPLOYEE_NAME',width:100,halign:'center',align:'center',formatter:_setContent,sortable:true">姓名</th>
					<th data-options="field:'UNIT_NAME',width:140,halign:'center',align:'center',formatter:_setContent,sortable:true">aaa</th>
					<th data-options="field:'DEPT_NAME',width:140,halign:'center',align:'center',formatter:_setContent,sortable:true">bbbb</th>
					</tr>
				</thead>
</table>

接下来就是JS了，

说明（引用他人的）：

建立一个全局的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的赋值！

1. $("#maingrid").datagrid({   
2.     idField: 'id',   
3.     view: fileview   
4.  });  
5.   
6. var fileview = $.extend({}, $.fn.datagrid.defaults.view, { onAfterRender: function (target) { ischeckItem(); } });  
7.   
8. var checkedItems = [];  
9.  function ischeckItem() {  
10.         for (var i = 0; i < checkedItems.length; i++) {  
11.             $('#maingrid').datagrid('selectRecord', checkedItems[i]); //根据id选中行   
12.         }  
13.     }  
14.   
15.  function findCheckedItem(ID) {  
16.         for (var i = 0; i < checkedItems.length; i++) {  
17.             if (checkedItems[i] == ID) return i;  
18.         }  
19.         return -1;  
20.     }  
21.   
22.  function addcheckItem() {  
23.         var row = $('#maingrid').datagrid('getChecked');  
24.         for (var i = 0; i < row.length; i++) {  
25.             if (findCheckedItem(row[i].id) == -1) {  
26.                 checkedItems.push(row[i].id);  
27.             }  
28.         }  
29.     }  
30.     function removeAllItem(rows) {  
31.   
32.         for (var i = 0; i < rows.length; i++) {  
33.             var k = findCheckedItem(rows[i].id);  
34.             if (k != -1) {  
35.                 checkedItems.splice(i, 1);  
36.             }  
37.         }  
38.     }  
39.     function removeSingleItem(rowIndex, rowData) {  
40.         var k = findCheckedItem(rowData.id);  
41.         if (k != -1) {  
42.             checkedItems.splice(k, 1);  
43.         }  
44.     }  
45.   
46.   
47.   
48. 一下工作操作时，调用上面的方法。  
49.   
50.   
51.   
52.     opts.onSelect = function(rowIndex, rowData){  
53.        <span style="color:#FF0000;"><strong> addcheckItem();</strong></span>  
54.         var blId = rowData.ssemExpBlId;  
55.         var key = getKey(rowIndex);  
56.         blnos[key] = blId;  
57.         printLog("onselect " + rowData.ssemBlNo);  
58.     };  
59.       
60.     opts.onUnselect = function(rowIndex, rowData){  
61.         removeSingleItem(rowIndex, rowData);  
62.         var blId = rowData.ssemExpBlId;  
63.         var key = getKey(rowIndex);  
64.         blnos[key] = false;  
65.         printLog("onunselect " + rowData.ssemBlNo);  
66.     };  
67.       
68.       
69.     //选中全部  
70.     opts.onSelectAll = function(rows){  
71.         addcheckItem();  
72.         $.each(rows,function(i,e){  
73.             var key = getKey(i);  
74.             if(!blnos[key]) blnos[key] = e.ssemExpBlId;  
75.         });  
76.         //loadcnt();  
77.     };  
78.       
79.     //取消全部  
80.     opts.onUnselectAll = function(rows){  
81.         removeAllItem(rows);  
82.         $.each(rows,function(i,e){  
83.             var key = getKey(i);  
84.             if(blnos[key]) blnos[key] = false;  
85.         });  
86.         //loadcnt();  
87.     };  

88. //批量删除

89. function destroyItems(items) {
            var row = null;
            if (items == "list") {
                items = checkedItems.join(',');
                row = $('#maingrid').datagrid('getSelections');
            }
            else {
                row = items;
            }
            if (row != null) {
                $.messager.confirm('Confirm', '您确定要删除此记录?', function (r) {
                    if (r) {
                        $.post(location.href, { id: items, action: "deletelist" }, function (result) {
    
                            if (result == "1") {
                                $('#maingrid').datagrid('reload');
                            } else {
                                $.messager.show({
                                    title: 'Error',
                                    msg: result
                                });
                            }
                        });
                    }
                });
            }
            else { $.messager.alert('-警告-', '请选择至少一条记录才能进行删除', 'info'); }
    
        }