分页切换后复选框状态残留的真正原因是table.cache中仍存旧勾选快照,layui翻页只重绘当前页dom却不自动清跨页记录;清当前页用clearcheck(),清全部页须table.clearcache('id')配合form.render('checkbox')。

分页切换后复选框状态残留的真正原因
不是 DOM 没更新,而是 table.cache 里还存着旧的勾选快照 —— Layui 翻页时只重绘当前页 DOM,但不会自动清掉跨页选中记录。你看到“勾选还在”,其实是 table.checkStatus('yourTableId').data 仍返回上一页的 ID,而表头 checkbox 却没同步这个状态。
清空当前页复选框:用 clearCheck() 就够了
如果只要清当前页(比如翻页前手动取消所有勾选),直接调实例方法:
myTableIns.clearCheck();
注意:clearCheck() 不影响其他页,也不动 table.cache,只清当前页 DOM 和内部标记。适合点击“取消当前页选择”这类操作。
- 必须在表格渲染完成(
done回调)之后调用,否则实例未就绪 - 不能在
page事件回调里直接调 —— 此时新页数据还没加载完,clearCheck()会清空的是“上一页”的 DOM - 若表格启用了
checkField: 'selected',确保新数据里该字段为false或不存在,否则 Layui 会误判已勾选
彻底清空所有页的勾选:必须清 table.cache + form.render('checkbox')
跨页勾选状态藏在 table.cache['yourTableId'] 里,Layui 官方没暴露清除接口,但 table.clearCache('yourTableId')(v2.8+)是唯一可靠方式:
table.clearCache('yourTableId');<br>layui.form.render('checkbox');
clearCache() 抹掉 checked、allChecked 等键值;form.render('checkbox') 同步 DOM 上的勾选样式。缺一不可。
- 传入的 ID 必须和
table.render({ id: 'yourTableId' })一致,不能是元素 ID 或实例 - 别手动写
table.cache['yourTableId'] = []—— 这漏掉allChecked标志,下次点全选框会逻辑反向 - 如果用了自定义
checkField,清缓存后新数据里该字段也得初始化为未选态,否则 reload 时又被识别为已勾选
翻页时自动清空?别依赖 page 事件
table.on('page(yourTableId)', ...) 触发时机太早,此时新页数据尚未载入,clearCheck() 或 clearCache() 都会作用错对象。正确做法是把清空逻辑放在 done 回调末尾:
done: function(res, curr, count) {<br> // 其他逻辑...<br> table.clearCache('yourTableId');<br> layui.form.render('checkbox');<br>}
这样确保每次新页渲染完成,缓存和 UI 同步归零。
最易被忽略的点:table.checkStatus('xxx').isAll 只反映当前页,不是全量;如果你靠它判断“是否该设表头为全选”,却没在 done 里重新读取并手动更新表头 checkbox 的 checked 属性和 layui-form-checked 类,视觉状态永远不同步。











