默认勾选必须由数据字段驱动,字段名默认lay_checked且值为布尔true;若后端用checked字段,需在render前设table.config.checkname='checked'并确保值为true/false。

复选框默认勾选必须靠数据字段驱动,不是 DOM 操作
layui 表格的 type: 'checkbox' 列不响应手动 prop('checked', true) 或直接写 checked 属性——渲染时会被清空。真正生效的方式,是在原始数据对象里加一个布尔值字段,让 layui 初始化阶段自动识别并渲染为已选状态。
常见错误现象:
– 在 done 回调里用 jQuery 找到 checkbox 并设 checked,但点击后状态错乱或 table.checkStatus() 拿不到该行
– 后端返回 "checked": "true"(字符串)或 "checked": 1(数字),结果没反应
- 字段名默认是
LAY_CHECKED,值必须为严格布尔值true(不是字符串"true",也不是数字1) - 字段必须直接挂在每条数据对象上,不能放在
res.data外层,也不能在templet里动态拼接 - 如果后端字段名固定为
checked或is_selected,需提前用table.config.checkName = 'checked'覆盖默认字段名
如何统一修改 checkName 字段名(适配后端返回格式)
很多项目后端统一用 checked 字段表示选中状态,而 layui 默认只认 LAY_CHECKED。这时不能改后端,就得改前端配置——且必须在 table.render() 之前执行。
关键点:这个配置是全局生效的,会影响所有后续渲染的表格,所以建议在 layui.use('table', ...) 内部、table.render() 调用前设置。
- 写法必须是
table.config.checkName = 'checked',不是$.extend(table, {config: {...}})(旧写法在 2.8+ 已不稳定) - 字段值仍须为布尔值
true/false;若后端返回的是1/0,需在 AJAXsuccess回调里遍历转换:res.data.forEach(d => d.checked = d.checked === 1) - 不要在
templet里重复判断或输出checked属性——那属于自定义列,和内置type: 'checkbox'是两套逻辑
异步加载时默认勾选的正确时机
数据从接口返回后,必须在 table.render() 的 data 参数里就包含带 layChecked(或你配置的字段名)的数据对象。任何“渲染完再补”的操作都不可靠。
- 推荐在 AJAX
success回调中处理:拿到res.data后,根据业务规则(如 ID 列表、状态字段)循环标记d.checked = true,再传给table.render({ data: processedData }) - 不要等
done回调再改res.data并试图触发重绘——done是渲染完成后的钩子,此时 DOM 已定型,改数据不会同步到视图 - 分页场景下,只有当前页的数据会被渲染,所以只需处理当前页的
res.data;跨页勾选需额外用全局 Set 缓存 ID,翻页时在done中还原
容易被忽略的兼容性细节
看似简单的默认勾选,实际在不同版本和组合场景下行为不一致。最常踩的坑不在逻辑,而在字段位置和类型校验。
-
layChecked: true必须是数据对象自身的属性,不能是原型链继承或 Proxy 劫持后的值——layui 用hasOwnProperty检测字段存在性 - 使用
table.reload()时,必须显式传入完整data(或url+where),否则新请求返回的数据不会自动带上你的勾选字段,导致状态丢失 - 如果表格同时启用了
type: 'radio'和type: 'checkbox',且都依赖同一字段名(如checked),会互相干扰;建议 radio 用is_checked,checkbox 用LAY_CHECKED隔离











