今天有个需求,要求如下:
点击全选所有相同属性的字段,以便进行批量操作
bootstrap-table点击选中所有同属性的数据,区别于全选与点选,需要先选中需要全选其同组数据的数据,然后点击全选同组按钮,便会选中其所有同属性的数据,以便后续进行批量操作
查阅了一下相关资料,并不多,大多数如何默认选中之类的操作
结合了一些资料,我实现了此功能,实现原理如下
使用字段格式化,修改点选栏的方法,如果有需要默认点选的字段便自动点选确认
添加按钮,点击按钮会使需要选中的数据塞入默认选中数组中,然后重置表格便会默认点选同组的所有数据了
默认点选字段的数组要及时,再添加记忆滚轮位置的方法,选定后跳回原位置
废话不说,直接上代码
先定义一个需要选定的数据的数组
var checkSet = new Set();
在表格初始化时,对点选栏进行重写
var options = { url: prefix + "/list", ...... rememberSelected: true, //翻页记住选中 columns: [{ field: 'state', checkbox: true, formatter: function (value, row, index) { // 如果属性相同就默认选中 if (checkSet.has(row.name)) { return {checked: true}; } return {checked: false}; } }, ......
在html页面添加‘全选同组’的按钮(使用了ruoyi框架)
<a class="btn btn-danger multiple disabled" onclick="checkAllGroup()"> <i class="fa fa-check"></i> 全选同组 </a>
实现点击全选相同属性所有数据的方法
// 点选同组的所有数据 function checkAllGroup() { //清空默认选中数据 checkSet = new Set(); // 拿到需要的选中的数据的名称 var checkNameList = $.map($("#" + table.options.id).bootstrapTable('getSelections'), function (row) { return $.common.getItemField(row, table.options.columns[2].field); }); for (var i = 0; i < checkNameList.length; i++) { checkSet.add(checkNameList[i]) } // 获取当前滚动条的位置 var scollPostion = $('#bootstrap-table').bootstrapTable('getScrollPosition'); // 重置表格以调用点选方法 $.form.reset() // 回到原位置 setTimeout(function () { $('#bootstrap-table').bootstrapTable('scrollTo', scollPostion); }, 200); }
利用上述方法,我成功实现了需求所需功能