layui表格跨页选中需手动维护全局id集合,因翻页会重建dom和缓存,table.checkstatus()仅返回当前页数据;须在done回调中同步视觉与内部状态,并显式传参reload以保留页码和条件。

table.checkStatus() 拿不到跨页选中数据,因为 layui 表格每次翻页都重建 DOM 和内部缓存,只保留当前页的勾选状态。必须手动用唯一 id 维护全局选中集合,并在 done 回调里同步视觉和内部标记。
为什么 table.checkStatus('test') 返回的总是空或只有当前页数据
它不是 bug,是设计逻辑:layui 不自动跨页维护选中映射。翻页后 res.data 是全新数组,obj.data 里的 lay-id、index 全部重排,靠它们存状态必然错乱。你看到的“勾选消失”,本质是 DOM 被销毁重建,没人告诉新行“你之前被点过”。
- 别用
obj.data.LAY_TABLE_INDEX或数组下标当 key —— 翻页后值全变 - 后端返回的数据必须带稳定唯一字段(如
id、user_id),且在table.render()中显式声明id: 'user_id' -
table.checkStatus()的data字段永远只含当前页已勾选项,不能反推全局
怎么在 done 回调里正确恢复 checkbox 视觉和内部状态
done 是唯一可靠时机:DOM 渲染完成、行元素可定位、setRowChecked 或手动操作才能生效。早于它(比如在 parseData)会失败;晚于它(比如 setTimeout)可能被后续渲染覆盖。
- 遍历
res.data,对每个row.id在selectedIds中存在的项,设row.LAY_CHECKED = 'true' - 同时执行:
$('input[type="checkbox"]').prop('checked', true)+.next().addClass('layui-form-checked') - 表头全选框也要同步:
$('.layui-table th[data-field="0"] input')的checked和 class 都得手动设 - 别直接改
res.data原始结构加字段(如row.checked = true),Layui 2.8+ 对此敏感,可能引发渲染异常
监听 checkbox 事件时怎么避免重复添加或漏处理
必须用 table.on('checkbox(filter)', callback),不是原生 click,否则全选/反选操作会漏掉。
- 单行操作:
if (obj.checked) { selectedIds.push(obj.data.id); },取消时用filter或splice移除 - 全选分支(
obj.type === 'all')只处理当前页:obj.data.map(d => d.id),千万别塞入全部 ID(数据量大时卡死,且分页没拿全) - 同一行反复勾选/取消要防重复:用
!selectedIds.includes(id)判断再 push,或用Set自动去重 - 别在监听里调
table.checkStatus()或table.reload()—— 容易触发重复渲染或状态冲突
table.reload() 后勾选全丢?根源和修复要点
reload 不继承初始配置,漏传 url、where、page.curr 中任意一项,表格就可能跳回第 1 页、发空请求,甚至渲染失败 —— 勾选状态只绑定在当前页 DOM 和缓存上,重绘即丢。
- 必须显式传全:
table.reload('test', { url: '/api/list', where: { token: localStorage.getItem('token') }, page: { curr: tableIns.config.page.curr } }) -
where里所有动态值(如搜索关键词、token)必须每次重新读取,不能缓存旧值 - reload 前不用特殊操作;但 reload 后,
done仍需执行同步逻辑 —— 因为新页 DOM 又重建了
最易被忽略的一点:表头全选框的状态不是自动联动的,它只反映“当前页是否全选”,必须在 done 里用 res.data.map(d => d.id).every(id => selectedIds.includes(id)) 手动判断并设置。漏掉这步,用户会困惑“我都点了全选,怎么表头没打钩”。











