写的有点多,可以直接看贴的代码(第一段代码、第二段代码、第三段代码)
网上很多博客几乎都是抄来抄去,而且几乎都没有什么用,索性还不如自己写纯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 οnclick='edit("+ options.rowId + ")' style='cursor: pointer;'>编辑</a> <a οnclick='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),实现起来也很简单,但是没有任何意义,难道成千上万条数据也用得着进行批量操作?
后面对此进行了优化包括数据传输,点我跳转
更多推荐
jqGrid给表格添加序号且页面分页跳转到下一页时,序号自动紧接上一页结尾且保持翻页选中复选框
发布评论