关于easyui中datagrid在使用过程中遇到的问题

     今天下午捣鼓了一下午，到最后弄好后，才发现自己走了不少弯路，下面让我说说遇到的问题

     首先说一下我的需求，在开发的软件中需要一个人员列表，人员比较多，需要分页处理，而且人员列表所属的页面是一个弹出的dialog层，当选中人员点击确定后，在其父页面中以选框出现，并且可以自由删除（这里的意思就是弄个效果跟我们在京东、淘宝等网站进行多条件查询时，把选择的查询条件放在一起，并根据我们自己需要进行增删组成不同查询条件那样）。所以，最终我考虑把人员列表又作为了一个dialog弹出，并且在这个dialog中利用了easyui中的datagrid类列出人员情况。在这个过程中主要遇到的两个问题如下：

     1、 在这个人员列表中，当我选中一页后，想到下一页去选择另外一些人或者通过查询条件去选择不同页的人时，原来选中的没有了。（即进行多项选择时不支持分页）

     2、第一个解决完了后，又出现了这个问题，在选择了多个人员后，在其父dialog中展示出来了所有的人员，当我点击人员进行删除后，想再次打开人员列表进行修改，但发现datagrid中选中的行依旧是我原来的人员列表（即我在父dialog中删除的人员在这里依旧被选中）

 为了解决这两个问题，应该说是重点是第二个问题，花了好长时间啊

 首先把我的datagrid让大家看一下

<div id="PersonListDialog" style="width:480px;height:450px">    <div id="tp">        <span class="querybutton" style="width:220px">人员：<input type="text" id="Person" /> </span>        <span class="querybutton" style="width:180px"><a style="width:65px;" id="QueryPerson" onclick="QueryPersonList()">查询</a></span>    </div>    <table id="PersonListGrid"> </table></div>

  isFirst = true;        $('#PersonListGrid').datagrid({            url: '/RiskAndQuestion/HandleProblemAndRisk/GetListUser',            fitColumns: true,            idField: 'UID',            pagination: true,            singleSelect: false,            collapsible: false,            onBeforeLoad: function (param) {                var dd = $('#PersonListGrid').datagrid('getPager');                var options = $(dd).pagination('options');                if (isFirst) {                    param.rows = 10;                    isFirst = false;                }                else {                    param.rows = options.pageSize;                }            },            columns: [[{ field: 'dd', checkbox: true },                { field: 'UID', hidden: true },                { field: 'UName', hidden: true },                { field: 'UOccupation', title: '人员', halign: 'center', width: 120 },            ]]        })        var ww = $('#PersonListGrid').datagrid('getPager');        $(ww).pagination({            pageSize: 10,//每页显示的记录条数，默认为10            pageList: [10, 15, 30],//可以设置每页记录条数的列表            beforePageText: '第',//页数文本框前显示的汉字aa            afterPageText: '页    共 {pages} 页',            displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录'        })    })

解决第一个问题 

就是js代码中中标红的这句

<span style="font-family:SimSun;font-size:12px;">idField: 'UID'</span>

idField要选择一个在数据集中存在的列，而且最好是唯一的，这样就实现了多项选择的分页支持。

 解决第二个问题  
对于第二个问题，实现的这段很少的代码

  allPersonList = $('#PersonListGrid').datagrid('getSelections');                    var string = "";                    for (var i =0; i < allPersonList.length; i++) {                        string += "<span id='" + allPersonList[i].UID + "' style='float:left;margin-left:10px;border:1px #4f4f4f solid;'>" + allPersonList[i].UName + "   <a href='javascript:void(0);' onclick='deletePerson(\"" + allPersonList[i].UID + "\")'><img border='0' src='/Images/QQ20140714110704.jpg' width='20' height='20'></a></span>";                    }                    $("#ShowAssignPerson").append(string);

    function deletePerson(uid) {        for (var i = 0; i < allPersonList.length; i++)        {            if(allPersonList[i].UID==uid)            {                  allPersonList.splice(i, 1);                $('#PersonListGrid').datagrid('getChecked').splice(i, 1);            }        }        $("#" + uid).remove();    }

关键步骤是标红的那两句，

   allPersonList.splice(i, 1);    $('#PersonListGrid').datagrid('getChecked').splice(i, 1);

在点击删除后 ，先在存放人员信息的allPersonLIst 删掉人员信息，同时将datagrid的checked的那行数据取消选中。当再打开人员列表的dialog时，剩余的人员信息自然跟datagrid中的选中行匹配了。

这是在从datagrid选择人员点击确定后的效果。

   同时，在这个过程中还看了看clearChecked这个方法，原来看的文档比较老，都没有这个方法。不过还是再强调一下，上面的那句：datagrid("getchecked").splice(i,1).这句用的比较好。