jgGrid表格插件按照正常情况下,设置multiselect:true,,就可以实现多选。但是当数据分页显示时,翻页后,之前已经选择的就会失效。
这里通过设置一个全局变量(checkBox),缓存已经选中的数据项,来实现翻页后保持选中。再定义一个全局全局变量(cPage),重新加载的时候清空checkBox,在翻页事件中运用这个cPage变量;
<html>
<head>
<title>jqGrid 实例</title>
</head>
<body>
···代码省略···
<table id="list1"></table>
<div id="pager1"></div>
···代码省略···
</body>
</html
function pageInit(){
jQuery("#list1").jqGrid({
url : ctx+'/JSONData',
datatype : "json",
colNames : [ 'Inv No', 'Date', 'Client', 'Amount', 'Tax','Total', 'Notes' ],
colModel : [
{name : 'id',index : 'id',width : 55},
{name : 'invdate', index : 'invdate',width : 90},
{name : 'name',index : 'name',width : 100},
{name : 'amount',index : 'amount', width : 80, align : "right"},
{name : 'tax',index : 'tax',width : 80,align : "right"},
{name : 'total',index : 'total',width : 80,align : "right"},
{name : 'note',index : 'note',width : 150,sortable : false}
],
rowNum : 10,
rowList : [ 10, 20, 30 ],
pager : '#pager13',
sortname : 'id',
viewrecords : true,
sortorder : "desc",
multiselect : true,
multikey : "ctrlKey",
caption : "翻页行保持选中状态",
editurl : "xxxxxx.php" ,
onPaging:function (pgButton) {
cPage++; //翻页事件
},
loadComplete : function(data) {
if (cPage == 0) {
checkBox = [];//每次加载清空选中状态
}
cPage = 0;
var rowArr = data.rows;
if (checkBox.length > 0) {
for (var i = 0; i < rowArr.length; i++) {
for (var j = 0; j < checkBox.length; j++) {
if (rowArr[i].id == checkBox[j].id) {
$("#list1").jqGrid('setSelection', rowArr[i].id);
break;
}
}
}
}
},
onSelectRow:function(rowId,status){
if(status){
if (checkBox.indexOf(rowId) == -1){
checkBox.push(rowId);
}
}else{
deleteCheckBox(rowId);
}
}
function deleteCheckBox(rowId){
for(var i = 0; i < checkBox.length; i++){
if (checkBox[i].rfqNo == rowId){
//根据索引值删除checkBox中的数据
checkBox.splice(i,1);
}
}
}