先看效果:
当勾选全选的时候,所有记录都全选,当取消勾选时候,所有记录都取消。当手动取消某一行的时候,仅仅只取消勾选你取消的那一行。
实现思路:
记录你取消的行的id到数组中。然后在onloadSuccess里面通过判断是否在当前页中。来判断是否取消选中。简单代码如下:
grid的创建就不写了,只写主要的代码:
var markAll = '';//标记是否选中了全选按钮
var cacelIds = [];//标记取消选中行的ID
var checkIds = [];//标记选中的行的ID
//grid的事件
onLoadSuccess : function(data) {
if (markAll == 'all') {
$(this).datagrid('checkAll');
}
if (markAll == '' && checkIds.length == 0) {
$(this).datagrid('uncheckAll');
}
$.each(cacelIds, function(index) {
var rowIndex = $('#bankData_data_grid').datagrid(
'getRowIndex', cacelIds[index]);
if (rowIndex != -1) {
$('#bankData_data_grid').datagrid('uncheckRow',
rowIndex);
}
});
},
onCheck : function(index, row) {
//选中行的时候,移除记录的选中的id,并且添加选中行的ID到选中id的数组里面
checkIds.push(row.ID);
if (cacelIds.length > 0) {
cacelIds.pop(row.ID);
}
//当选中行的时候,判断是否都选中了,如果都选中,则全选的勾选框勾选
if (cacelIds.length == 0 && markAll == 'all') {
$('#allCheck').prop('checked', true);
}
},
onUncheck : function(index, row) {
//当取消选中行的时候,将全选的勾选改变为非勾选
checkIds.pop(row.ID);
$('#allCheck').attr('checked', false);
if ($.inArray(row.ID, cacelIds) == -1) {
//记录ID到取消勾选的记录集合里面
cacelIds.push(row.ID);
}
}
/*全选*/
function checkAll(obj) {
//是否选中
var isCheck = $('#allCheck:checked').length >= 1 ? true : false;
if (isCheck) {
markAll = 'all';
$('#bankData_data_grid').datagrid('checkAll');
cacelIds = [];//清空记录的id
} else {
$('#bankData_data_grid').datagrid('uncheckAll');
markAll = '';
checkIds=[];//清空记录id
}
}