jqGrid给表格添加序号且页面分页跳转到下一页时，序号自动紧接上一页结尾且保持翻页选中复选框（优化），绑定数据做批量操作

继上一篇翻页选中之后，功能可以实现，但是在对后台数据的交互的时候，增加后台id作为批量操作的唯一id时候遇到了一些问题，包括页面显示已选n条记录这两个问题，针对这两个问题重新进行了优化，这一优化导致重新修改了所有代码，可见在写代码初期就一定要想好未来需要做的事情，不然就像我一样因为项目紧张赶进度，导致设计缓存对象时候不严谨，直接贴上代码，代码逻辑在注释中，每行都有

//定义对象用来保存选中页与选中id
     function selects(page,id){
         this.page=page;
         this.id=id;
     };
     //定义map结构用来缓存key为roleId对象以及value为selects的map
     var selectsMap = new Map();

关注标红代码即可

setJQGrid: function(){
				$("#jqGrid").jqGrid({
			        url: '/xxx/role/queryPage',
			        datatype: "json",
			        colModel: [
			            { label: '角色序号', name: 'roleId', sortable: true},
			            { label: '角色名', name: 'name', sortable: true},
			            { label: '创建人', name: 'createBy', sortable: true},
			            { label: '创建时间', name: 'createDate', sortable: true},
			            { label: '最近更新人', name: 'updateBy', sortable: true},
			            { label: '最近更新时间', name: 'updateDate', sortable: true},
			            { label: '备注', name: 'remark', sortable: true},
			            { label: '操作', name: 'operate', sortable:false , formatter: function (cellvalue, options, rowObject) {
		                     return "<a onclick='edit("+ options.rowId + ")' style='cursor: pointer;'>编辑</a>    <a onclick='deleteRoleRow("+ options.rowId + ")' style='cursor: pointer;'>删除</a>";
		                  }
		                }
			        ],
			        shrinkToFit:true,
			        autoScroll: true,
			        viewrecords: true,
			        height: 365,
			        rowNum: 3,
			        rowList : [3,30,50],
			        rownumbers: true,
			        pgbuttons:true,
			        pginput:true,
			        //autowidth:true, 
			        width: 1314,
			        //rownumWidth:2000,
			        multiselect: true,//复选框
			        pager: "#jqGridPager",
			        jsonReader : {
			            root: "roles",
			            page: "page.currPage",
			            total: "page.totalPage",
			            records: "page.totalCount"
			        },
			        prmNames : {
			            page:"currPage",
			            rows:"limit",
			            order: "order",
			        },
			        //当表格所有数据都加载完成而且其他的处理也都完成时触发此事件，排序，翻页同样也会触发此事件
			        gridComplete:function(){
			        	//冻结列
			            jQuery("#jqGrid").jqGrid('setFrozenColumns');
			            //对jqgrid的序号进行列名的设置
			            jQuery("#jqGrid").jqGrid('setLabel',0, '标记', 'labelstyle');
			            //获取所有行rowid
			            var ids = jQuery("#jqGrid").jqGrid('getDataIDs');
			            if(ids){
			            	//遍历所有id
			            	for(var i=0; i<ids.length; i++){
			            		//选中偶数行
			            		if (ids[i]%2 == 0) {
			            			//对偶数行进行class设置
			            			$('#jqGrid '+'#'+ids[i]).find("td").addClass("table-list-bg-color"); 
								}
			            	}
			            };
			            //1 判断selectsMap是否为空
			            if(selectsMap.size > 0){
			            	//2 获取翻页之后的当前页码
			            	var currentPage = $('#jqGrid').getGridParam('page');
			            	//3 对selectsMap进行遍历
			            	selectsMap.forEach(function (value, key, map) {
			            		//4 判断翻页之后的当前页是痘有多选框被勾选过
			            		if(value.page == currentPage){
			            			//5 已经被勾选过就进行保持选中
					            	$("#jqGrid").setSelection(value.id);
			            		}
			            	})
			            }
			        },
			        //当选择行时触发此事件 rowid：当前行id；status：选择状态
			        onSelectRow:function(rowid,status){
						//1、选中某一行时将当前页的页数和选中的id放入对象中
						//1.1 获取当前页码
						var page = $('#jqGrid').getGridParam('page');
						//1.2 获取当前被勾选的所在行所有数据
						var rowData = $('#jqGrid').jqGrid('getRowData',rowid);
						//1.3 判断是选中状态还是取消状态
						if(status){
							//1.4 获取当前行的对应所有页码的唯一数据
							var roleId = rowData.roleId;
							//1.5 将页码以及行id放入到缓存对象中去
							var selecttest = new selects(page,rowid);
							//1.6 将所有页面中唯一id作为key，将对象作为value存入缓存map中
							selectsMap.set(roleId,selecttest);
						}else{
							//如果是取消状态就从selectsMap中删除这一缓存
							selectsMap.delete(rowData.roleId);
						};
						//页面上的已选几条记录
						//获取selectsMap的长度赋值给vue的selectRows判断当前已勾选多少条记录
						vm.selectRows = selectsMap.size;
			        },
			        //选中所有行
			        onSelectAll:function(){
			        	var ids=$("#jqGrid").jqGrid("getGridParam","selarrrow");
						if (ids != null) {
							vm.selectRows = ids.length;
						};
			        }
			    });
			}

以上代码封装在function中，因为使用vue，所以还需要将selectsMap中的roleId的数据封装成数组传到vue的data中去

前端页面的批量删除，点击删除后显示确认是否删除，绑定了样式，在js的绑定样式中将roleId数组传到vue中

1、前端页面

2、js传数据到vue

3、vue只需要加一个roleIds就可以了

4、在确认删除之后获取vue的roleIds进行批量操作