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取出来就可以了