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、在使用选择结果时，直接从缓存数组中取即可。