EasyUI datagrid实现翻页保持checkbox状态

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、代码展示

<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ include file="/pageHead.jsp" %>
<%@page import="com.iss.itreasury.common.utils.SysConstant"%>

<script type="text/javascript">
	document.onkeydown = function(e) {
    var e = e || event;
    if(e.keyCode == 13) {
	setTimeout(function(){
	           $('#success').val("");
	        },0);
	        e.preventDefault ? e.preventDefault() : (e.returnValue = false);
	    }
	}	
	
	
	
	$(function(){	
		$("#hid").hide(); 
		
		$("#allpeople").change(function () {  
	        var aaa = $("#allpeople  option:selected").text();  
	        if(aaa == "所有人"){
	        	//$('#dg2').datagrid('clearSelections');
	        	$('#dg2').datagrid('reload');
				$("#hid").hide(); 
			}else{
				//$('#dg2').datagrid('clearSelections');
				$('#dg2').datagrid('reload');
				$("#hid").show(); 
			}
	    });
		
		var fileview = $.extend({}, $.fn.datagrid.defaults.view, { onAfterRender: function (target) { ischeckItem(); } });

		var checkedItems = [];
		function ischeckItem() {
	        for (var i = 0; i < checkedItems.length; i++) {
	            $('#dg2').datagrid('selectRecord', checkedItems[i]); //根据id选中行 
	        }
		}
		
		function findCheckedItem(ID) {
	        for (var i = 0; i < checkedItems.length; i++) {
	            if (checkedItems[i] == ID) return i;
	        }
	        return -1;
		}

		 function addcheckItem() {
	        var row = $('#dg2').datagrid('getChecked');
	        for (var i = 0; i < row.length; i++) {
	            if (findCheckedItem(row[i].id) == -1) {
	                checkedItems.push(row[i].id);
	            }
	        }
		 }
		 function removeAllItem(rows) {

	        for (var i = 0; i < rows.length; i++) {
	            var k = findCheckedItem(rows[i].id);
	            if (k != -1) {
	                checkedItems.splice(i, 1);
	            }
	        }
		 }
		 function removeSingleItem(rowIndex, rowData) {
	        var k = findCheckedItem(rowData.id);
	        if (k != -1) {
	            checkedItems.splice(k, 1);
	        }
		 }
		
		$('#dg2').datagrid({
			idField: 'id', 
		    view: fileview,
			method: 'post',
			//title: '用户列表',
			width: '1000',
			height: '325',
			fitColumns: true,
			singleSelect: true,
			pagination: true,
			url:'${systemctx}/userManager/userQuery.json',
            pageSize: 15,
            pageList: [ 20, 50, 100],
            queryParams: formToJson("pageform"),
            rownumbers:true,
            singleSelect:false,
			columns:[[
				{field:'id',title:' ',checkbox:true,align:'center'},
				{field:'username',title:'用户名',width:'15%'},
				{field:'realname',title:'真实姓名',width:'15%'},
				{field:'roleName',title:'角色',width:'15%'},
				{field:'mobilePhone',title:'移动电话',width:'15%',align:'center'},
				{field:'email',title:'电子邮件',width:'20%'},
				{field:'sexName',title:'性别',width:'5%',align:'center'}
			]],
			toolbar:[],
			onCheckAll:function(rows){
				addcheckItem();
			},
			onCheck:function(rowIndex,rowData){
				addcheckItem();
			},
			onUncheckAll:function(rows){
				removeAllItem(rows);
			},
			onUncheck:function(rowIndex,rowData){
				removeSingleItem(rowIndex,rowData);
			}
		});
		//将查询项放入工具栏中
		//$('#tb').insertBefore("table:first",'.datagrid-toolbar');
	});
	
	

	function saveInstant(){
  		
  	}
	
	
</script>

	<form id="pageform" class="easyui-form" method="POST" data-options="novalidate:true">
	    <div class="pageBody">
			<table  class="tableFrom">
				<tr>
					<th>推送标题:</th>
					<td><input id="title" class="iss_text" name="title" data-options="required:true"/></td>
				</tr>
				<tr>
					<th>推送内容:</th>
					<td><textarea rows="8" cols="60" id="content" name="content" maxlength="150"></textarea></td>
				</tr>
				<tr>		
					<th>广播（所有人）:</th>
					<td>
						<select panelheight="auto" name="allpeople" id="allpeople" style="width:142px; width:185px\9;">
							<option value="1">所有人</option>
							<option value="2">自定义</option>
						</select>
					</td>	
				</tr>				
				<tr id="hid">		
					<th>接收人：</th>
					<td > 
						<table id="dg2" width="100%" height="100%"></table>		
					</td>	
				</tr>
				<tr>
					<td colspan="2" class="t-r">
						<input type="button" class="button" οnclick="saveInstant()" value="保存"/>
						<input value="取消" type="button" class="button" οnclick="$.closeWindow('dg');"/>
					</td>
				</tr>
			</table>
		</div>
	</form>

7、效果展示