启用单选行模式需在cols中配置{type:'radio',fixed:'left'}且必须为第一列或fixed列;默认选中靠LAY_CHECKED:true字段;选中事件监听table.on('radio(filter)'),翻页后需手动维护选中状态。
type: 'radio' 列配置必须写对
直接在 cols 里加 { type: 'radio', fixed: 'left' } 就能启用单选行模式,但必须确保这一列是第一列(或至少是 fixed 列),否则点击可能失效。layui 2.8 不识别 type: 'radio' 以外的值,写成 'radiobox' 或漏掉 type 字段,渲染出来就是空白列。
常见错误现象:cols 里写了 type: 'radio',但表格没出现单选框——检查是否漏了 fixed: 'left';或者用了 templet 覆盖了默认渲染,导致 Layui 失去对 radio 的事件绑定。
- 不要手动写
<input type="radio">标签,Layui 会接管并重置状态 -
name属性由 Layui 自动统一生成,不用管,也不用自己拼 - 如果列里混用了
templet,必须返回完整 radio HTML 且带name和value,否则点击无响应
默认选中某一行靠 LAY_CHECKED 字段
Layui 表格识别 LAY_CHECKED: true 这个字段来决定初始是否选中。它只认这个固定字段名,不是 is_checked、selected 或其他自定义名。
例如原始数据是:[{id: 1, title: "A"}, {id: 2, title: "B"}],想让第二行默认选中,就得提前改造成:[{id: 1, title: "A"}, {id: 2, title: "B", LAY_CHECKED: true}]。
- 字段名大小写敏感,
lay_checked或layChecked都不生效 - 只在初始化
data数组时有效;reload 后若想刷新默认状态,得在done回调里重新 patch 数据再调table.reload() - 如果数据来自 AJAX,在
success回调里遍历一次,按业务逻辑设LAY_CHECKED即可
选中后怎么拿到当前行数据?别用 form.on('radio')
表格里的 radio 是嵌套在 <td> 里的,不在表单域内,<code>form.on('radio') 监听不到。正确方式是监听 table.on('radio(filter)') 事件。
filter 是你 table.render() 里写的 lay-filter 值,比如 lay-filter="userTable",那就写 table.on('radio(userTable)', ...)。
-
obj.data就是当前被选中的整行数据对象 -
obj.checked恒为true(因为 radio 只有选中态,没“取消”概念) - 不需要手动 uncheck 其他行——Layui 的
type: 'radio'模式天生互斥
翻页后默认选中丢失?得自己记 ID
Layui 的 type: 'radio' 不带跨页记忆,默认只在当前页生效。翻页后上一页的选中状态就丢了。
解决办法很简单:在 table.on('radio(filter)') 里把选中的 obj.data.id 存到全局变量,比如 window.selectedId = obj.data.id;然后在 done 回调里遍历当前页数据,找到匹配的那行,手动加 LAY_CHECKED: true 再 reload。
- 别试图操作 DOM 加
layui-form-radioed类——Layui 下次渲染会清掉 - reload 时传入新的
data数组比 patchcache更稳定 - 如果后端接口支持全量返回(不分页),也可以用
layui.table.cache['yourId']查找,但要注意这仅限本地数据或假分页场景
type: 'radio' + LAY_CHECKED 字段驱动,任何绕过这两者的 DOM 操作或事件监听都会失效。











