bootstrap-table分页记住勾选

本文介绍如何在使用ruoyi封装的JS时,实现Bootstrap-Table在分页时记住用户勾选的状态。参考了一篇来自优快云的文章。

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

var hbk_names = new Array();// 全局保存人员名字的数组
 // 绑定选中事件、取消事件、全部选中、全部取消
        	$.btTable.on("check.bs.table check-all.bs.table uncheck.bs.table uncheck-all.bs.table", function (e, rows) {
        		// 复选框分页保留保存选中数组
        		var rowIds = $.table.affectedRowIds(rows);
        		if ($.common.isNotEmpty($.table._option.rememberSelected) && $.table._option.rememberSelected) {
        			func = $.inArray(e.type, ['check', 'check-all']) > -1 ? 'union' : 'difference';
        			selectionIds = _[func](selectionIds, rowIds);// 全局选中的第一列ID值
        		}
        		console.log(selectionIds)
        		var rows = $.isArray(rows) ? rows : [rows];
				if(func=='union'){
					$.each(rows,
				            function (i, v) {
				                // 添加时,判断一行或多行的 id 是否已经在数组里 不存则添加 
				                hbk_names.indexOf(v.userName) == -1 ? hbk_names.push(v.userName) : -1;
				            });
				}else{
					$.each(rows, function (i, v) {
			            hbk_names.splice(hbk_names.indexOf(v.
### 实现 Bootstrap-Table 多选功能 为了在 `bootstrap-table` 中实现多选功能,可以利用插件自带的选择框特性。具体来说,在初始化表格时设置特定的数据属性来开启多选模式。 #### HTML 结构配置 定义表格结构并加入必要的数据属性以支持多选操作: ```html <table id="table" data-toggle="table" data-url="/data.json" <!-- 数据源 --> data-pagination="true" <!-- 启用分页 --> data-side-pagination="server" <!-- 服务器端分页 --> data-click-to-select="true" <!-- 单击行即选中 --> data-show-columns="true"> <!-- 显示列控制器 --> <thead> <tr> <th data-field="state" data-checkbox="true"></th> <!-- 添加此列为复选框 --> <th data-field="id">ID</th> <th data-field="name">Name</th> <th data-field="price">Price</th> </tr> </thead> </table> ``` 上述代码片段展示了如何创建一个多选表单[^1]。注意 `<th>` 标签内的 `data-checkbox=true` 属性用于指示该列表头应呈现为选择框而不是常规文本字段。 #### JavaScript 配置选项 除了HTML中的静态声明外,还可以通过JavaScript动态调整一些行为参数或者监听事件处理逻辑: ```javascript $('#table').on('check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table', function () { console.log($('#table').bootstrapTable('getSelections')); }); ``` 这段脚本绑定了几个重要的勾选状态改变事件,并打印当前被选中的所有行对象到控制台。这有助于开发者进一步开发基于用户交互的功能扩展[^2]。 #### 自定义样式与增强体验 对于更复杂的场景,可能还需要自定义CSS类名以及额外的JS函数来进行界面美化和服务请求优化等工作。例如,可以通过修改 `.select-item:checked + .text { color:red }` 这样的方式突出显示已选项目;也可以结合AJAX技术实现实时更新服务端资源池等功能[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

黄宝康

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值