layui表格reload后复选框清空是设计行为,因DOM重建导致状态丢失;需手动缓存selectedIds并在done回调中同步LAY_CHECKED、DOM及表头全选状态。

layui 表格执行 table.reload()(比如点击搜索按钮触发)后复选框全部清空,不是 bug,是 layui 的设计行为:它会销毁并重建整个 DOM,checked 属性和内部的 LAY_CHECKED 标记全被丢弃。想保留状态,必须自己记、自己塞回去。
为什么 search 触发 reload 后勾选就没了
根本原因有两点:一是 table.reload() 不继承任何 UI 状态,只按新参数重新渲染;二是你没把用户点过的行 ID 存下来,也没在新数据渲染完后主动恢复。
- 常见错误现象:
table.checkStatus('test').data在 reload 前取到 3 条,reload 后调用直接返回空数组 - 即使你在
where里传了搜索条件,layui 也不会自动把旧选中 ID 映射到新返回的数据上 - 别指望
initSort或page.curr这类配置能顺带保住 checkbox —— 它们管排序和分页,不管选中
reload 前必须缓存 selectedIds 数组
所有跨操作的状态延续,起点都是这一步:用唯一字段(如 id)记录已选行,且这个字段必须来自后端、稳定不变。
- 全局声明:
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); } }); - 全选分支要单独处理:
if(obj.type === 'all'){ const currPageIds = obj.data.map(d => d.id); if(obj.checked){ selectedIds = [...new Set([...selectedIds, ...currPageIds])]; } else { selectedIds = selectedIds.filter(id => !currPageIds.includes(id)); } } - 别用
obj.data.index或obj.data.LAY_TABLE_INDEX—— 翻页或搜索后这些值全变,映射立刻错乱
done 回调里必须同步 LAY_CHECKED 和 DOM
done 是唯一可靠的时机:DOM 已渲染完毕,res.data 是当前页真实数据,此时设状态才不会被覆盖。
- 在
table.render()或table.reload()的配置中写:done: function(res, curr, count){ res.data.forEach(row => { if(selectedIds.includes(row.id)){ row.LAY_CHECKED = true; } }); } - 光设
LAY_CHECKED不够,还得手动同步 checkbox 元素:$(`.layui-table tbody tr[data-index="${row.LAY_TABLE_INDEX}"] input[type="checkbox"]`).prop('checked', true).next().addClass('layui-form-checked'); - 表头全选框也要手动更新:
const currPageIds = res.data.map(d => d.id); const allChecked = currPageIds.length && currPageIds.every(id => selectedIds.includes(id)); $('.layui-table th[data-field="0"] input').prop('checked', allChecked).next().toggleClass('layui-form-checked', allChecked); - 不要在
parseData或before钩子中操作 —— 此时 DOM 还没生成,会失败
reload 调用时漏传 page.curr 就会跳回第一页
很多人搜完发现勾选没了,其实是因为 reload 后表格默认回到第一页,而你缓存的 selectedIds 本来就是跨页的,但新页面只渲染第一页数据,自然“找不到”那些 ID。
- 务必显式传
page: { curr: tableIns.config.page.curr },其中tableIns是你 render 返回的实例 - 如果用的是前端分页(
data模式),reload 时也得确保data是全量数据,否则selectedIds里的 ID 可能在新data里根本不存在 - 搜索条件要动态读取:
where: { keyword: $('#searchInput').val(), token: localStorage.getItem('token') },不能写死成空字符串或旧值
最易被忽略的一点:每次 reload 后,table.cache 会被完全刷新,之前存在里面的任何状态都失效。所以不要依赖 table.cache['test'] 里的 checked 字段做判断,一切以你自己维护的 selectedIds 为准 —— 它才是你业务侧的真实选中集合。


















