bootstrapTable 复选框跨页勾选

### 实现 Bootstrap Table 复选框跨页选择 为了实现在 `Bootstrap Table` 中的复选框能够跨越多个页面保持选择状态，可以采用客户端存储机制来保存用户的选项。通常的做法是利用浏览器本地存储（如 `localStorage` 或者 `sessionStorage`），以便在用户翻页或者刷新页面之后仍然能记住之前的选择。 当表格加载时读取这些数据并应用到相应的行上；同时，在每次有新的记录被选中或取消选中的时候更新这个缓存列表。下面是一个具体的实现方案： #### 使用 JavaScript 和 localStorage 来管理已选项目 1. **初始化表格** 需要在创建表实例的时候设置一些属性以支持全选按钮以及事件监听器用于处理单个条目的点击事件。 ```javascript $('#table').bootstrapTable({ url: 'your_data_source', // 数据源地址 pagination: true, // 启用分页 sidePagination: 'server',// 设置为服务器端分页 clickToSelect: true // 单击行可选中 }); ``` 2. **定义辅助函数** 创建几个帮助方法用来获取当前所有选定 ID 的数组、向集合添加新成员、移除指定项等操作。 ```javascript function getSelections() { var ids = []; $.each(localStorage.getItem('selectedRows'), function(index, id){ ids.push(id); }); return ids; } function addSelection(rowId) { let selectedIds = JSON.parse(localStorage.getItem('selectedRows') || '[]'); if (!selectedIds.includes(rowId)) { selectedIds.push(rowId); localStorage.setItem('selectedRows', JSON.stringify(selectedIds)); } } function removeSelection(rowId) { let selectedIds = JSON.parse(localStorage.getItem('selectedRows') || '[]'); const index = selectedIds.indexOf(rowId); if (index !== -1) { selectedIds.splice(index, 1); localStorage.setItem('selectedRows', JSON.stringify(selectedIds)); } } ``` 3. **绑定事件处理器** 对于每一行上的复选框变化都需要触发相应的方法去同步本地储存的状态。 ```javascript $(document).on('check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table', '#table', function(event, rows) { switch(event.type){ case 'check': addSelection(rows.id); break; case 'uncheck': removeSelection(rows.id);break; case 'check-all': $.each($('#table').bootstrapTable('getData'),function(i,row){ addSelection(row.id); });break; case 'uncheck-all': localStorage.removeItem('selectedRows');break; } }); // 页面初次渲染完成后恢复之前的选取状态 $(window).load(function(){ setTimeout(() => { let prevSelected = JSON.parse(localStorage.getItem('selectedRows')) || []; $.each(prevSelected,function(i,id){ $('#table').bootstrapTable('checkBy',{field:'id',values:[id]}); }); }, 0); }); ``` 通过上述方式可以在一定程度上满足对于复杂交互的需求，即实现了即使是在不同页面之间切换也能维持住用户所做出的选择[^1]。