jqGrid使用multiselect翻页时保持选中状态
使用场景:表单需要提加jqGrid表格中选中的行的id,而表格由于数据太多需要翻页,但每次选中checkbox翻页再翻回来之前选中的消失了。所以需要做到翻页后再回来之前选中的checkbox继续保持选中状态。
1.首先,要让表格出现checkbox选择框列,需要添加multiselect属性
2.其次:需要了解onSelectAll,onSelectRow,loadComplete三个事件
3.思路:需要自定义一个全局选中项的数组checkArray和全局的页码pageNum,在哪个页面选中时,要将页码和选中的rowId全都保存进数组里,当表格加载时,再根据数组中的记录找到对应页面的rowId让其变成选中状态。
注:由于让checkbox保持选中只是看起来好看,实际我是要提交选中的行的内容id,所以在数组项中我添加了三个参数:页码,rowId,内容id:{"pageNum":pageNum,"rowId":rowIds[i],"ID":rowData.warnAreaId};
4.代码
//设置全局变量选中的数组和当前页码
var checkArray=[];
var pageNum=1;
/**
* 初始化DataGrid
*/
function initDataGrid() {
$('#grid-table').jqGrid({
url : $.cxt + "/coWarnArea/getAreaPeopleSettingList",
datatype : "json",
postData : {
warnType:'4',
},
mtype : "POST",
height : 'auto',
autowidth : true,
colNames : [ '案件编号','案件名称','归属地市','案件级别','开始时间', '结束时间' ],
colModel : [ {
name : 'warnAreaId',
align : 'center',
index : 'warnAreaId',
editable : false,
}, {
name : 'warnAreaName',
align : 'center',
index : 'warnAreaName',
editable : false,
formatter : renderOperation
}, {
name : 'areaName',
align : 'center',
index : 'areaName',
editable : false
}, {
name : 'caseLevel',
align : 'center',
index : 'caseLevel',
editable : false
}, {
name : 'startDate',
align : 'center',
index : 'startDate',
editable : false
}, {
name : 'endDate',
align : 'center',
index : 'endDate',
search : false,
sortable : false,
editable : false,
} ],
viewrecords : true,
rowNum : 10,
rowList : [ 10, 20, 30 ],
pager : '#grid-pager',
altRows : true,
multiselect : true,//添加这个属性可以出现选择checkbox
//multiboxonly : false,
onSelectAll:function(rowIds,status){ //选中全部时触发,rowIds为当页所有的rowId
//checkArray数组中把当页的全删除
for(var i=0;i<rowIds.length;i++){
for(var j=0;j<checkArray.length;j++){
if(checkArray[j].pageNum==pageNum && checkArray[j].rowId==rowIds[i]){
checkArray.splice(j,1);
break;
}
}
}
//如果是选择的选中,则把当页所有条目加上
if(status){
for(var i=0;i<rowIds.length;i++){
var rowData=$("#grid-table").jqGrid('getRowData', rowIds[i]);
var checkedItem={"pageNum":pageNum,"rowId":rowIds[i],"ID":rowData.warnAreaId};
checkArray.push(checkedItem)
}
}
//console.log(checkArray)
},
onSelectRow:function(rowId,status){ //点击checkbox触发 rowId为当前触发的rowid
//选中行的行数据
var rowData=$("#grid-table").jqGrid('getRowData', rowId);
var checkedItem={"pageNum":pageNum,"rowId":rowId,"ID":rowData.warnAreaId};
if(status){
//如果选中,则判断数组中如果没有的话加入数组
for(var i=0;i<checkArray.length;i++){
if(checkArray[i].pageNum==pageNum && checkArray[i].rowId==rowId ){
return false;
}
}
checkArray.push(checkedItem);
}else{
//删除数组
for(var i=0;i<checkArray.length;i++){
if(checkArray[i].pageNum==pageNum && checkArray[i].rowId==rowId){
checkArray.splice(i,1);
break;
}
}
}
//console.log(checkArray)
},
//每个页面加载时触发
loadComplete : function(data) {
//改变全局变量pageNum页码
pageNum=data.page;
//循环数组,让当页中的rowId变为选中状态
for(var i=0;i<checkArray.length;i++){
if(checkArray[i].pageNum==pageNum){
$("#grid-table").jqGrid('setSelection', checkArray[i].rowId ,true);
}
}
//console.log(checkArray)
},
});
// JqGrid重新布局
$(window).triggerHandler('resize.jqGrid');
// JqGrid分页栏设置
$('#grid-table').jqGrid('navGrid', '#grid-pager', {
edit : false,
editicon : 'ace-icon fa fa-pencil blue',
add : false,
addicon : 'ace-icon fa fa-plus-circle purple',
del : false,
delicon : 'ace-icon fa fa-trash-o red',
search : false,
searchicon : 'ace-icon fa fa-search orange',
refresh : true,
refreshicon : 'ace-icon fa fa-refresh green',
view : false,
viewicon : 'ace-icon fa fa-search-plus grey'
})
}
选中的数组
6.提交数据时只需要循环数组,将其中的ID取出来就可以了