checkStatus 返回空数组是因为排序触发重载后 DOM 重绘,原勾选状态丢失;需用唯一 ID 全局缓存 selectedIds,并在 done 回调中同步 LAY_CHECKED、DOM checked 属性及 layui-form-checked 类。
表头排序触发重载时,checkStatus 为什么返回空数组?
因为默认情况下,layui 表格在点击表头排序时会重新请求数据(除非你禁用 autosort: false),而新返回的数据是全新渲染的 dom,之前通过勾选产生的 data.lay_checked = true 或 dom 上的 checked 属性全部丢失。此时调用 table.checkstatus('id') 只能拿到当前页、当前排序结果下的选中行 —— 而不是用户“跨排序状态”记住的那些。
必须用「ID 唯一标识 + 全局缓存」而非依赖 DOM 状态
不能靠 $('.layui-table input[type=checkbox]').prop('checked') 或监听 checkbox 事件后只存当前页数据,否则一排序就清零。正确做法是:
- 为每条原始数据定义唯一字段(如
id、eno),确保后端返回时稳定存在 - 声明一个全局数组(如
var selectedIds = [];)长期持有所有被用户点过的 ID - 在
done回调里遍历当前页res.data,对每个对象检查其 ID 是否在selectedIds中,若是则手动设置o.LAY_CHECKED = true并同步 DOM 的checked和图标状态 - 监听
table.on('checkbox(filter)')和table.on('tool(filter)')时,只操作selectedIds数组:勾选则push,取消则splice(注意用indexOf判断存在性)
done 回调里回填选中状态的关键写法
这是最容易出错的一环:仅设 o.LAY_CHECKED = true 不够,Layui 内部还依赖 DOM 上的 checked 属性和 .layui-form-checked 类来渲染视觉效果。必须同步操作:
done: function(res, curr, count) {
// 1. 遍历当前页数据
res.data.forEach(function(row) {
if (selectedIds.includes(row.id)) { // 假设主键是 id
row.LAY_CHECKED = true;
var index = row.LAY_TABLE_INDEX;
var $cb = $('.layui-table tbody tr[data-index="' + index + '"] input[type="checkbox"]');
$cb.prop('checked', true);
$cb.next().addClass('layui-form-checked');
}
});
// 2. 手动更新全选框状态(否则它不知道已部分选中)
var status = table.checkStatus('user_table');
var $allCb = $('.layui-table th[data-field="0"] input[type="checkbox"]');
$allCb.prop('checked', status.isAll);
$allCb.next().toggleClass('layui-form-checked', status.isAll);
}
排序后全选框显示异常?检查 isAll 的判定逻辑
Layui 的 checkStatus().isAll 是基于当前页所有数据是否都被勾选来计算的,它**不感知全局缓存**。所以即使你缓存了 50 条 ID,当前页只有 10 条且只勾了其中 3 条,isAll 就是 false —— 这是正常行为。如果你希望全选框变成“半选”状态(即当前页部分勾选),Layui 原生不支持,得自己加样式:
- 在
done里算出当前页已勾选数:var currPageChecked = res.data.filter(r => selectedIds.includes(r.id)).length; - 若
currPageChecked === 0,全选框未选;若currPageChecked === res.data.length,全选框打钩;否则加.layui-form-checkboxindeterminate类并手动设置indeterminate属性 - 注意:这个类名和属性需要你自己补 CSS,Layui 2.8+ 才内置了 indeterminate 样式支持
真正麻烦的从来不是“怎么让勾选留下来”,而是“怎么让 UI 准确反映跨页、跨排序的混合选中语义”——这里没有银弹,所有状态都得你用 ID 对齐、用数组维护、用 DOM 同步。











