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

最新推荐文章于 2021-07-19 00:07:44 发布

fanghuaiming

最新推荐文章于 2021-07-19 00:07:44 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： jqGrid JS 文章标签： js

本文链接：https://blog.youkuaiyun.com/qq_40144558/article/details/80774582

jqGrid表格在分页时遇到序号显示和选中复选框保持的问题，通过优化解决了这些问题。文章详细介绍了如何在翻页时序号自动连续，并在前端页面实现批量操作功能，包括绑定数据、批量删除以及与Vue数据交互的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

继上一篇翻页选中之后，功能可以实现，但是在对后台数据的交互的时候，增加后台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},