easyui datagrid checkbox

easyui datagrid 中本身有checkbox列的属性设置，在使用中发现分页的时候这个checkbox的选择很有问题，比如在第二页点了全选，到第三页的时候，竟然也是选择状态，并且还不是所有选择，有一两个没有选择的，于是就手工在数据源中组织出checkbox，然后手工加上选择代码

<table id="tt" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th field="sel"><input type="checkbox" id="chkall" onchange="selall();" /></th>
<th field="sid" align="center">学号</th>
<th field="StudentName" align="center">姓名</th>
<th field="Sex" align="center">性别</th>
<th field="IDcode" align="center">身份证</th>
<th field="mname">专业</th>
<th field="Grade" align="center">年级</th>
<th field="showdate" align="center">报名时间</th>

</tr>
</thead>
</table>

function selall() {
var chk = $('#chkall').is(':checked');
var rows = $('#tt').datagrid('getRows');
for (i = 0; i < rows.length; i++) {
$("input:checkbox[name='cbstu']").get(i).checked = chk;
}
}

这里让所有checkbox全选/全不选，百度出来很多，试了几种方法，全不管用，都是第一二次可以变换状态，第三次就变不了，于是就用循环一个个的改变其状态。

$('#tt').datagrid({
url: url,
pagination: true,
rownumbers: true,
pageSize: 20,
//checkOnSelect: true,
idField: 'studentId',
striped: true,
onSelect: function (rowIndex, rowData) {
setchk('tt', 'cbstu', rowIndex, true);
},
onUnselect: function (rowIndex, rowData) {
setchk('tt', 'cbstu', rowIndex, false);
},
onLoadSuccess: function (data) {
var rows = $('#tt').datagrid('getRows');
for (i = 0; i < rows.length; i++) {
$('#tt').datagrid('unselectRow', i);
}
}
});

var p = $('#tt').datagrid('getPager');
(p).pagination({
beforePageText: '第',//页数文本框前显示的汉字
afterPageText: '页    共 {pages} 页',
displayMsg: '共{total}条数据'

});

在事件（onLoadSuccess），将行的选择状态变成不选择，要不他的背景就是黄色的。

function setchk(datagridname, chkname, rowindex,chk) {
var rows = $('#' + datagridname + '').datagrid('getRows');
$("input:checkbox[name='" + chkname + "']").get(rowindex).checked = chk;
}

在行选择事件中调用这个方法来改变该行checkbox的状态。

var stuids = [];

for (i = 0; i < rows.length; i++) {
var chk = $("input:checkbox[name='cbstu']").get(i).checked;
if (chk == true) {
stuids.push(rows[i].studentId);
}
}

在使用到选择行的时候，也是通过循环判断哪个checkbox选中了，然后将他的值加入数组。

大概就是这样了，不过这些还不够的，因为并没有记录选中行的方法，在翻页后以前的选择将无法保存。如果要实现这个，分两部分来实现即可，仅是思路，没有具体代码：1、建立一个缓存数组，保存其ID，本例中是studentId，在checkbox状态改变时，修改缓存数组的保存状态。2、在datagrid的翻页事件中，判断该页的所有行中的ID值是否在缓存数组中，如果有，则该行设置为选中状态，其checkbox设置为选中状态。3、在使用选择结果时，直接从缓存数组中取即可。