EasyUI datagrid实现翻页保持checkbox状态

谁践踏了优雅 2022-07-24 11:13 202阅读 0赞

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、效果展示

![Center][]

![Center 1][]

[JavaScript]: http://lib.csdn.net/base/18
[Center]: /images/20220722/2d1d6c9711c44a178b1946375f89a53b.png
[Center 1]: /images/20220722/4c0689c59c354dfcbe73ae34a9320068.png