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

<%@ 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" onclick="saveInstant()" value="保存"/>
                        <input value="取消" type="button" class="button" onclick="$.closeWindow('dg');"/>
                    </td>
                </tr>
            </table>
        </div>
    </form>

7、效果展示