Layui表格如何实现跨页批量勾选并导出选中行

Layui分页表格中checkbox翻页“失忆”是因为其不维护全局选中状态，需用外部数组selectedIds手动记录ID；勾选时增删ID，导出时通过前端缓存或后端批量查询获取完整数据。

为什么 checkbox 在 Layui 分页表格里一翻页就“失忆”

用过 Layui 表格做批量操作的朋友，大概率都踩过这个坑：明明在第一页勾选了几条数据，一翻到第二页，刚才的勾选全没了。这其实不是程序出了 Bug，而是 Layui 表格本身的设计机制就是如此。

免费影视、动漫、音乐、游戏、小说资源长期稳定更新！ 👉 点此立即查看 👈

无论是前端分页还是服务端分页，table.render() 渲染的表格，其复选框的选中状态都只“活”在当前页的 DOM 结构里。一旦翻页，新的页面会重新渲染，旧的 DOM 节点被销毁，自然也就找不到之前的勾选记录了。所以，你用 table.checkStatus('id') 这个方法，永远只能拿到当前页的选中数据，跨页的数据它一概不知。

• 服务端分页：情况最直接，每一页数据都是独立从后端请求回来的，DOM 完全重建，之前的 checkbox 节点自然就消失了。
• 前端分页：虽然所有数据都在本地，但 Layui 并不会自动将你勾选的状态同步回原始的数据源对象里。
• 核心结论：Layui 表格本身并不维护一个全局的选中状态池，这就是问题的根源。

用 data 数组手动维护选中 ID 列表

既然框架不帮我们记，那我们就自己记。最核心的思路就是：抛弃对 DOM 状态的依赖，转而用一个外部的 Ja vaScript 数组（比如叫 selectedIds）来记录用户所有勾选过的行的唯一标识（通常是数据里的 id 字段）。

具体操作分几步走：

• 首先，确保你的表格数据里有一个唯一字段（比如 id），并在列配置中设置 type: 'checkbox'。
• 接着，监听表格的复选框事件 table.on('checkbox(filterId)', ...)。在回调函数里，你能拿到当前操作行的数据对象 obj.data 以及是选中还是取消的状态 obj.checked。
• 然后，就是对这个 selectedIds 数组进行增删操作。这里有个细节要注意去重，因为同一行可能被反复勾选、取消。
• 最后，如果数据是服务端分页，意味着前端没有所有数据的完整详情。那么在最终导出时，你需要把收集好的 selectedIds 数组传给后端，让后端一次性查询出这些 ID 对应的完整数据，这能有效避免 N+1 查询的性能问题。

let selectedIds = [];
table.on('checkbox(test)', function(obj){
  const id = obj.data.id;
  if(obj.checked){
    if(!selectedIds.includes(id)) selectedIds.push(id);
  } else {
    const i = selectedIds.indexOf(id);
    if(i > -1) selectedIds.splice(i, 1);
  }
});

导出时怎么拿到跨页的完整行数据

状态记录好了，怎么把数据拿出来用呢？关键点在于：别再指望 table.checkStatus() 了。你需要根据 selectedIds 自己去组织完整的数据。通常有两条技术路径可选：

• 前端全量缓存：在表格初始化前，就把后端返回的所有数据（或者首次加载的全部数据）存到一个全局的 Map 对象里，Key 是 id，Value 是整行数据。导出时，直接遍历 selectedIds 从 Map 里取数据拼装。这种方法省去了后续的请求，但比较消耗客户端内存，适合数据量不大的场景。
• 后端按 ID 拉取：这是更通用和稳妥的做法。在点击导出时，发起一个请求，将 selectedIds 数组传给后端。后端使用 WHERE id IN (...) 这样的 SQL 语句一次性查询，并生成 Excel 或 CSV 文件流返回。这种方式尤其适合数据量大、字段多的场景。
• 别忘了边界处理：导出按钮一定要加上判断，如果 selectedIds.length 为 0，就提示用户“请先选择数据”，否则点了也没反应，体验不好。
• 性能小贴士：如果选中的 ID 数量非常大（比如上千），直接拼成超长的 SQL IN 子句可能会让数据库压力山大。这时候可以考虑分批次查询，或者让后端采用临时表的方式来优化。

容易被忽略的细节：全选按钮和反选逻辑要同步处理

上面的方案处理了每一行的勾选，但表格头部那个“全选/反选”的 checkbox 呢？很多人就在这里栽了跟头。点击表头的全选框，并不会触发我们上面监听的 table.on('checkbox') 事件。

你需要额外处理它：

• 监听全选：可以通过监听 table.on('tool(test)') 事件，或者直接给表头的复选框绑定 click 事件。当全选触发时，遍历当前页的所有 data，把它们的 id 全部加入 selectedIds 数组（注意去重）。
• 取消全选：同理，取消全选时，需要将当前页所有数据的 id 从 selectedIds 中移除，而不是清空整个数组（因为其他页可能还有选中的）。
• 处理反选：反选的逻辑稍微复杂点。你需要先找出当前页未被选中的行的 ID，加入数组；再把当前页已被选中的行的 ID，从数组中剔除。
• 状态同步：还有一个容易出问题的地方：当你进行搜索、筛选或者表格重载后，表头的全选框的选中状态不会自动更新。记得在表格重载后，手动将其设置为未选中状态，否则会给用户造成误解。