分页跳转后复选框状态丢失是layui表格默认行为,需用唯一id(如id)维护selectedids数组,并在done回调中同步lay_checked、dom选中状态及表头全选框。

分页跳转后复选框状态丢失,不是 bug,是 layui 表格的默认行为:每次翻页都会重建 DOM,table.checkStatus() 只返回当前页已勾选的数据,不维护跨页记忆。必须手动用唯一 ID 维护选中集合,并在 done 回调里同步状态。
为什么 table.checkStatus('test') 拿不到跨页选中项
它只读取当前页渲染后的 DOM 和内部缓存,而翻页时 res.data 全量替换、checkbox 元素全部销毁重建。你之前点过的行,在新页里是全新节点,没有“继承”任何状态。指望它自动聚合所有页的选中 ID,结果必然是导出为空或漏数据。
必须用唯一字段(如 id)存 selectedIds 数组
不能用 index、LAY_TABLE_INDEX 或临时 key——翻页后这些值全重排,映射立刻错乱。后端返回的数据里必须有稳定唯一字段(比如 id),并在 table.render() 中显式声明:id: 'id'(注意:这是表格配置项,不是列定义里的 field)。
-
全局定义:
let selectedIds = []; -
监听勾选事件:
table.on('checkbox(test)', function(obj) { if (obj.checked) { selectedIds.push(obj.data.id); } else { selectedIds = selectedIds.filter(id => id !== obj.data.id); } }); -
全选分支要谨慎:只处理当前页数据,用
obj.data.map(d => d.id)批量增删,别塞全部 ID(数据量大时卡死,且服务端分页根本没拿全)
在 done 回调里同步 LAY_CHECKED 和 DOM 状态
done 是唯一可靠的时机:DOM 已渲染完毕,res.data 可遍历,setRowChecked 或直接操作 checkbox 才能生效。早于它(比如 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').prop('checked', true).next().addClass('layui-form-checked'),判断逻辑是:当前页所有id是否都存在于selectedIds中
table.reload() 后勾选消失的修复要点
reload 会清空 DOM 并重建,所以必须显式传全参数,否则可能跳回第 1 页、发空请求,甚至渲染失败——状态自然归零。
-
url、where(token、搜索条件等需每次读取最新值)、page: { curr: tableIns.config.page.curr }都不能省 -
where里涉及动态值(如 token)必须实时读取,不能写死或缓存旧值 - 如果用了定时刷新或搜索触发 reload,务必在
done里加校验:if (!res.data || res.code !== 0),避免静默用空数据重绘
最易被忽略的是:全选框状态必须在 done 里重新计算并设置,而不是靠监听事件推导;另外,row.LAY_CHECKED = 'true' 和 DOM 的 checked 属性、layui-form-checked 类三者必须同步,缺一不可——否则 table.checkStatus() 返回空,导出、批量操作全失效。











