jqGrid使用multiselect翻页时保持选中状态

曾经终败给现在 2022-05-09 03:52 368阅读 0赞

![70][]

使用场景：表单需要提加jqGrid表格中选中的行的id，而表格由于数据太多需要翻页，但每次选中checkbox翻页再翻回来之前选中的消失了。所以需要做到翻页后再回来之前选中的checkbox继续保持选中状态。

1.首先，要让表格出现checkbox选择框列，需要添加multiselect属性

2.其次：需要了解onSelectAll，onSelectRow，loadComplete三个事件

![1010141-20170922131239540-1135513310.png][]

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'
    	})
    }

选中的数组

![70 1][]

6.提交数据时只需要循环数组，将其中的ID取出来就可以了

[70]: /images/20220509/295cb6f7e75d408eba40bea6d32340a4.png
[1010141-20170922131239540-1135513310.png]: /images/20220509/46db1a3ef6be497da7fbfe956290f6b2.png
[70 1]: /images/20220509/1e64343f31b14b5192283b061b957aaa.png