table.checkStatus 拿不到跨页选中数据,因其仅返回当前页勾选行,不维护跨页状态;需用唯一 id 全局缓存 selectedIds,并在 done 回调中手动同步 DOM 和 LAY_CHECKED 状态。
为什么 table.checkStatus 拿不到跨页选中数据
因为 table.checkstatus 只返回当前渲染页的勾选状态,它不关心你之前在哪一页点过什么——layui 的表格数据是分页重载的,每翻一页,res.data 就是全新数组,内部不会自动维护跨页 id 映射。
常见错误是:监听了 checkbox 事件,但只存 obj.data,没提取唯一标识(如 id);或者在 done 回调里直接改 res.data[i].LAY_CHECKED = true,结果下一页渲染时这个属性被丢弃。
- 必须用稳定字段(如后端返回的
id)做 key,不能用lay-id、索引或临时生成的值 -
table.checkStatus的data字段永远只含当前页已勾选行,别指望它“记住历史” - 不要在
done中手动设置row.LAY_CHECKED后再调table.reload()—— 这会清空你刚设的状态
如何在翻页时保持已选中行的视觉状态
核心是两件事:存 ID、同步 checkbox DOM 状态。Layui 不自动做后者,得你手动触发。
在全局定义一个数组,比如 selectedIds = [],每次勾选/取消都增删其中的 id 值;然后在 done 回调里遍历当前页数据,对每个匹配 id 的行,设置 row.LAY_CHECKED = true,并用 jQuery 找到对应 checkbox 元素,调 .prop('checked', true) 和加 layui-form-checked 类。
- 监听事件必须用
table.on('checkbox(filter)', ...),不是click,否则漏掉全选操作 -
done回调中不要修改res.data原始结构(比如加字段),Layui 2.8+ 对此敏感,可能引发渲染异常 - 如果用了服务端分页(
url+page: true),res.data是后端返回的纯数据,没带LAY_TABLE_INDEX,得自己用$.inArray或findIndex匹配
怎么拿到所有跨页选中的原始数据
没有“一键获取全部”的 API。你只能靠 selectedIds 数组 + 所有页原始数据缓存(或重新请求全量数据)来拼出完整集合。
典型做法是:用户点击“导出”或“提交”按钮时,发起一次新请求,把 selectedIds 作为参数传给后端;后端按这些 ID 查库、组装、返回。前端不负责拼全量数据——尤其当总数据量上万时,前端存不下。
- 如果坚持前端聚合,需在首次加载时把全量数据缓存进
allDataMap = new Map(),key 为id,value 为整行对象 - 每次调用
getSelectedRows()时,用selectedIds.map(id => allDataMap.get(id))提取 - 注意内存:10 万行数据 ≈ 20–30MB 内存占用,Chrome 可能卡顿甚至崩溃
预设某几行默认勾选(比如编辑回显场景)
在初始化 data 数组时,直接给对应对象加上 LAY_CHECKED: true 属性即可。Layui 渲染时会识别并自动勾选 checkbox。
但仅限于前端静态数据(data 参数传入)。如果是异步加载(url),就得等 done 回调拿到 res.data 后,遍历并 patch 这个属性,再手动同步 DOM。
- 别写
LAY_CHECKED: 'true'(字符串),必须是布尔值true - 如果用了
parseData,确保你在解析后、传给 Layui 前就加好该字段 - 全选按钮(表头复选框)的视觉状态不会自动同步,得你自己根据
selectedIds.length === totalAllPageCount来控制其 checked 状态和 class
checkbox 来更新 selectedIds。必须同时监听 tool 事件(针对 toolbar 按钮)或捕获表头全选框的 click,并区分 type: 'all' 场景单独处理。











