写的有点多，可以直接看贴的代码（第一段代码、第二段代码、第三段代码）
网上很多博客几乎都是抄来抄去，而且几乎都没有什么用，索性还不如自己写纯js实现
项目背景：使用vue+js完成，我在代码部分会标出哪些是关键性代码
使用组件jqGrid，下载引入就不说了，多余的也不说了，代码片段中有不懂的自己去翻一下中文文档：点此链接到jqGrid中文文档地址
所需要使用到的jqGrid的事件包括
| onSelectRow | rowid,status | 当选择行时触发此事件。rowid：当前行id；status：选择状态，当multiselect 为true时此参数才可用 |
| gridComplete | none | 当表格所有数据都加载完成而且其他的处理也都完成时触发此事件，排序，翻页同样也会触发此事件 |
| getDataIDs | none | array[] | 返回当前grid里所有数据的id |
| getGridParam | name | mixed value | 返回请求的参数信息 |
1、给表格添加序号且页面分页跳转到下一页时，序号自动紧接上一页结尾
首先将rownubers设置成true
初始化参数大全中定义
| rownumbers | boolean | 如果为ture则会在表格左边新增一列，显示行顺序号，从1开始递增。此列名为'rn'. | false | 否 |
$("#jqGrid").jqGrid({
url: '/xxx/xxx/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",
这样设置之后分页翻页之后自动紧接上一页翻页序号
再给序号这一列加上标题，事实证明上面提到的“rn”对我没有什么用
所以在页面加载完成之后用jquery进行选择添加列名
gridComplete:function(){
//冻结列
jQuery("#jqGrid").jqGrid('setFrozenColumns');
//对jqgrid的序号进行列名的设置
jQuery("#jqGrid").jqGrid('setLabel',0, '标记', 'labelstyle');
//获取所有行rowid
var ids = jQuery("#jqGrid").jqGrid('getDataIDs');
}
如图所示
2、翻页保持多选框选中
需求：在第一页选中第二行的时候，翻页到下一页选择第三行，再翻页回到第一页第二行已经被选中，再翻到下一页第三行已经被选中。
这里我忍不住要吐槽一下，在csdn搜jqgrid多选框保持选中，几十篇博客代码一模一样都不带改变量名的，几乎对我都没有起到什么作用
在jqgrid的gridComplete方法中对已保存的id进行自动选中的时候发现根本就没有作用，原因是因为在选中一个复选框之后进入onSelectRow（rowid,status）方法中进行存放的时候只能保存当前页的id，例如第一页选择了第一行数据那么rowid为1，将rowid存入全局变量数组作为缓存，此时进行翻页到第二页的时候所有的rowid又从1开始了，这时候你还没有选择就通过gridComplete帮你进行了选择，注意每页的rowid翻页之后重新从1开始排，这时候我就想到是否能对序号那一列进行选择，毕竟这一行翻页之后的数据是紧接上一页的，但是翻了翻jqgrid文档没有发现是否可以选择这一列的序号，并且通过
var rowIds = jQuery("#jqGrid").jqGrid('getDataIDs');
获取所有当前选择行数据也没有得到所谓的“rn”这一列，或许可以或许不可以谁知道，反正我没有这样做。
先贴代码大家应该都能看懂，我做了详细注释
页面只有一个简简单单的div
<div class="table-list"> <table id="jqGrid"></table> <div id="jqGridPager"></div> </div>
第一段代码是定义作为缓存的数据结构
//定义全局数组保存所选对象
var selectsArr = new Array();
//定义全局对象用来保存选中页与选中id
function selects(page,id){
this.page=page;
this.id=id;
}
页面上存储的结构如图：
第二段代码是进行勾选某一行的时候触发onSelectRow
//当选择行时触发此事件 rowid：当前行id；status：选择状态
onSelectRow:function(rowid,status){
//1、选中某一行时将当前页的页数和选中的id放入对象中
//1.1 获取当前页码
var page = $('#jqGrid').getGridParam('page');
//1.2 获取当前行
//1.3 判断是选中状态还是取消状态
if(status){
//1.4 如果是选中状态就将页面以及选中的id放入缓存中
var select=new selects(page,rowid)
selectsArr.push(select);
}else{
//2 取消选中的时候将页数和反选id从对象清除
//2.1遍历selectsArr,比对是否存在取消的id
for(i = 0; i < selectsArr.length; i++){
//2.2 判断selectsArr对象中是否已经存在取消勾选的当前页
if(selectsArr[i].page == page){
//2.3 判断selectsArr对象存在当前page是否存在当前取消勾选的id
if(selectsArr[i].id == rowid){
//2.4 selectsArr中存在该取消勾选项，进行删除
selectsArr.splice(i,1);
}
}
}
}
}
第三段代码是当页面新载入或者翻页时（数据渲染之后等一系列）触发gridComplete事件
切记要将数组中最后一个对象清空
//当表格所有数据都加载完成而且其他的处理也都完成时触发此事件，排序，翻页同样也会触发此事件
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");
}
}
};
//数据加在完毕进行翻页保持行选中
//判断数组不为空
if(selectsArr.length > 0){
//2、判断selects中是否有当前页数据
//2.1 获取当前页
var currentPage = $('#jqGrid').getGridParam('page');
//2.2 遍历selectsArr
for(i = 0; i < selectsArr.length; i++){
//2.3 判断是否有当前页数据
if(selectsArr[i].page == currentPage){
//2.4 已经被选择就进行复选框选择（用jqgrid进行选中）
$("#jqGrid").setSelection(selectsArr[i].id);
//2.5 将selectsArr数组中的最后一个值剔除，因为上一步相当于进行了单选也触发了onSelectRow事件
selectsArr.pop()
}
}
}
}
此外个人认为不需要对全部选中进行翻页保持选中（触发的jqgrid事件：onSelectAll），实现起来也很简单，但是没有任何意义，难道成千上万条数据也用得着进行批量操作？