最近在维护一个老系统时,用到jqGrid 跨页的时候需要选择值的保存问题,记录下。
思路:定义全局的array(selectedIds),当列表选中的时候就push进去,当列表取消选中时,将该项从selectedIds中删除
重点:1.列表加载完成时为列表增加复选框,并给每一个checkbox赋name;
2.回显时模拟checkbox的click事件,复选框勾选;
先定义:
///定义
var selectedIds = [];
jqGrid中添加
//加载完成模拟复选框的点击事件
loadComplete: function (xhr) {
var rowArray = xhr.rows;
if (selectedIds.length > 0) {
var count = 0;
$.each(rowArray, function (i, item) {
if (selectedIds.indexOf(item.cell[1].toString()) > -1) {
//判断arrayNewList中存在item.cell[1]值时,选中前面的复选框,item.cell[1]为需要的值的字段
$("[name='jqg_startech_table_jqgrid_" + (i + 1) + "']").trigger('click');
$("[name='jqg_startech_table_jqgrid_" + (i + 1) + "']").prop("checked", true);
count++;
}
});
if (rowArray.length == count) {
$("#cb_startech_table_jqgrid").prop("checked", true);
}
}
},
//全选触发事件
onSelectAll: function (aRowids, status) {
var rowData = $(this).jqGridRowValue();//操作行
var pageRowData = $(this).getRowData();//当前列表所有行
if (status == true) {
//循环aRowids数组,将Id放入selectedIds数组中
saveData(rowData);
} else {
deleteIndexData(rowData, pageRowData);
}
},
//选中某行触发事件
onSelectRow: function (aRowids, status) {
var rowData = $(this).jqGridRowValue();//操作行
var pageRowData = $(this).getRowData();//当前列表所有行
if (status == true) {
if (rowData.length == $(this)[0].rows.length - 1) {
$("#cb_startech_table_jqgrid").prop("checked", true);
}
saveData(rowData);
} else {
deleteIndexData(rowData, pageRowData);
}
}
附加
//将Id放入selectedIds数组中
function saveData(obj) {
$.each(obj,
function (i, item) {
if (selectedIds.indexOf(item.ID) < 0)
selectedIds.push(item.ID);
});
}
//将Id从selectedIds中删除 (仅删除当前页面列表中的数据)
function deleteIndexData(obj,pageObj) {
var rowDataIds = [];
var pageRowDataIds = [];
$.each(obj,
function (i, item) {
rowDataIds.push(item.ID);
});
$.each(pageObj,
function (i, item) {
pageRowDataIds.push(item.ID);
});
$.each(selectedIds,
function (i, sItem) {
if (pageRowDataIds.indexOf(sItem)>0 && rowDataIds.indexOf(sItem) < 0) {
selectedIds.splice(i, 1);
i--;
}
});
}
$.fn.jqGridRowValue = function () {
var $grid = $(this);
var selectedRowIds = $grid.jqGrid("getGridParam", "selarrrow");
var json = [];
var rowData;
if (selectedRowIds != "") {
var len = selectedRowIds.length;
for (var i = 0; i < len; i++) {
rowData = $grid.jqGrid('getRowData', selectedRowIds[i]);
json.push(rowData);
}
} else {
if (!!$grid.jqGrid('getGridParam', 'selrow')) {
rowData = $grid.jqGrid('getRowData', $grid.jqGrid('getGridParam', 'selrow'));
json.push(rowData);
}
};
return json;
}