EasyUI datagrid实现翻页保持选中状态

转载自: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 ? 在CODE上查看代码片 派生到我的代码片
  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、效果展示





评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值