關於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的值。

三、核心方法，addcheckItem()、removeAllItem(rows)、removeSingleItem(rowIndex, rowData)當選中或者取消checkbox時觸發

　   用來將checkbox的主鍵值保存在checkedItems數組，或者從數組中刪除對應的id值，findCheckedItem(ID)這個函數用來查找數組中

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

四、何時調用這些方法呢？分別在datagrid的 onCheckAll: addcheckItem,onCheck: addcheckItem,onUncheckAll: removeAllItem,onUncheck: removeSingleItem 這四個事件中

　　調用對應的方法。

五、翻頁後如何給checkbox賦值呢？關鍵就在這裏，datagrid重寫了$.fn.datagrid.defaults.view的onAfterRender事件，

　　所以在datagrid的view事件裏綁定這個函數就OK了。onAfterRender事件是當easyui的元素渲染完畢後執行的事件，在這裏會調用手寫的ischeckItem函數來實現對checkbox的賦值！

/*************************勾選*************************************************/

	var fileview = $.extend({}, $.fn.datagrid.defaults.view, { onAfterRender: function (target) { ischeckItem(); } });

	var checkedItems = [];
	 function ischeckItem() {
	        for (var i = 0; i < checkedItems.length; i++) {
	            $('#ttemp').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 = $('#ttemp').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);
	        }
	    }

這樣就可以實現翻頁依然都是勾選狀態--很不錯