jqGrid给表格添加序号且页面分页跳转到下一页时,序号自动紧接上一页结尾且保持翻页选中复选框

写的有点多,可以直接看贴的代码(第一段代码、第二段代码、第三段代码)

网上很多博客几乎都是抄来抄去,而且几乎都没有什么用,索性还不如自己写纯js实现

项目背景:使用vue+js完成,我在代码部分会标出哪些是关键性代码

使用组件jqGrid,下载引入就不说了,多余的也不说了,代码片段中有不懂的自己去翻一下中文文档:点此链接到jqGrid中文文档地址

所需要使用到的jqGrid的事件包括

onSelectRowrowid,status当选择行时触发此事件。rowid:当前行id;status:选择状态,当multiselect 为true时此参数才可用
gridCompletenone当表格所有数据都加载完成而且其他的处理也都完成时触发此事件,排序,翻页同样也会触发此事件
getDataIDsnonearray[]返回当前grid里所有数据的id
getGridParamnamemixed value返回请求的参数信息

1、给表格添加序号且页面分页跳转到下一页时,序号自动紧接上一页结尾

首先将rownubers设置成true

初始化参数大全中定义

rownumbersboolean如果为ture则会在表格左边新增一列,显示行顺序号,从1开始递增。此列名为'rn'.false
但是实际运用中发现这个rn丝毫作用不起
$("#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),实现起来也很简单,但是没有任何意义,难道成千上万条数据也用得着进行批量操作?

后面对此进行了优化包括数据传输,点我跳转



展开阅读全文

没有更多推荐了,返回首页