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

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},
可以通过设置 `pgbuttons` 和 `pginput` 属性来将 jqGrid 分页控件中的图标改成文字,然后通过 `pgtext` 属性来自定义分页控件中显示的文本信息,示例代码如下: ```javascript $("#grid").jqGrid({ // 其他配置项 pager: "#pager", pgbuttons: false, // 隐藏图标 pginput: true, // 显示文字 pgtext: "{0} {1} {2} {3}", // 自定义文本信息 // 其他配置项 }); ``` 在上述代码中,我们将 `pgbuttons` 属性设置为 `false`,表示隐藏分页控件中的图标;将 `pginput` 属性设置为 `true`,表示显示分页控件中的文字。然后,我们通过 `pgtext` 属性来自定义分页控件中显示的文本信息,其中: - `{0}` 表示上一页按钮的文字,可以设置为 "上一页"。 - `{1}` 表示当前页数和总页数的文本信息,例如 "第 1 页 / 共 10 页"。 - `{2}` 表示下一页按钮的文字,可以设置为 "下一页"。 - `{3}` 表示总记录数的文字,例如 "共 100 条记录"。 示例代码: ```javascript $("#grid").jqGrid({ // 其他配置项 pager: "#pager", pgbuttons: false, // 隐藏图标 pginput: true, // 显示文字 pgtext: " {0} {1} {2} {3}", // 自定义文本信息 recordtext: "共 {2} 条记录", // 自定义总记录数文本信息 // 其他配置项 }).navGrid("#pager", { edit: false, add: false, del: false, search: false }); $("#grid").jqGrid("navButtonAdd", "#pager", { caption: "上一页", buttonicon: "", title: "上一页", onClickButton: function () { var currentPage = $("#grid").jqGrid("getGridParam", "page"); if (currentPage > 1) { $("#grid").jqGrid("setGridParam", { page: currentPage - 1 }).trigger("reloadGrid"); } } }); $("#grid").jqGrid("navButtonAdd", "#pager", { caption: "下一页", buttonicon: "", title: "下一页", onClickButton: function () { var currentPage = $("#grid").jqGrid("getGridParam", "page"); var totalPages = $("#grid").jqGrid("getGridParam", "lastpage"); if (currentPage < totalPages) { $("#grid").jqGrid("setGridParam", { page: currentPage + 1 }).trigger("reloadGrid"); } } }); ``` 在上述代码中,我们通过 `navGrid` 方法和 `navButtonAdd` 方法来自定义分页控件中的上一页和下一页按钮。需要注意的是,如果使用 `navGrid` 方法来自定义分页控件,需要将 `edit`、`add`、`del` 和 `search` 参数设置为 `false`,否则会显示相应的图标按钮。 最后,你可以根据需要自由调整分页控件中的文字和样式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值