唯一可靠路径是在table.render列配置中用script模板写templet,内含带lay-skin="switch"的checkbox,name固定、value为行唯一标识,并在done回调中调用form.render('switch');监听需用form.on('switch(filter)'),通过this.checked和this.value获取状态与ID。
直接在 table.render 的列配置里用 templet 渲染一个带 lay-skin="switch" 的 input[type="checkbox"],再配合 form.on('switch(filter)') 监听事件——这是唯一可靠路径。别试图用 val() 读取状态,也别漏掉 form.render('switch') 的重渲染步骤。
表格列中怎么写 switch 模板(templet)
必须用 script 模板,不能直接写 HTML 标签;模板内要根据数据字段值决定是否加 checked 属性,且每个开关的 name 和 value 要能区分行数据:
-
name建议固定(如name="status"),它是form.on监听的关键标识 -
value必须是当前行唯一标识(如value="{{ d.id }}"),后续 AJAX 请求靠它定位数据 - 不要用
id属性——表格多行会重复,导致 DOM 冲突 - 务必写
lay-filter="status",且和form.on('switch(status)')中的 filter 名完全一致
示例模板:
<script type="text/html" id="statusTpl">
{{# if(d.status == 1){ }}
<input type="checkbox" name="status" value="{{ d.id }}" lay-skin="switch" lay-text="启用|禁用" lay-filter="status" checked>
{{# } else { }}
<input type="checkbox" name="status" value="{{ d.id }}" lay-skin="switch" lay-text="启用|禁用" lay-filter="status">
{{# } }}
</script>为什么表格里 switch 点击没反应?
因为 table.render 是异步渲染,DOM 插入后 form 模块并不知道新元素存在,必须手动触发重新解析。常见错误是只在页面初始化时调一次 form.render('switch'),翻页、重载后就失效。
- 必须在
table.render的done回调里执行layui.form.render('switch') - 如果用了
table.reload(),也要在 reload 的done里再 render 一次 - 确保
layui.use(['table', 'form'])已正确加载两个模块,顺序不重要,但缺一不可
监听 switch 变化时如何拿到真实状态和对应行数据
form.on('switch(status)') 回调里的 this.checked 才是 UI 当前真实状态(true/false),而 data.value 是你模板里写的 value 值(比如 d.id)。别用 $('input[name="status"]').val(),它永远返回初始值或 "on"。
-
this.value= 模板中写的value(如用户 ID) -
this.checked= 当前开关是否开启(布尔值,不是字符串) - 如果需要关联整行数据(比如修改其他字段),得靠
table.cache或提前存tr索引——因为回调里没有d对象 - 注意:手动调用
form.switch('status', true)不会触发该监听回调,业务逻辑需额外同步
如何用 JS 主动设置某行 switch 状态
不能只改 input.checked = true,Layui 的 UI 层不会响应。必须走官方 API 或模拟点击:
- Layui ≥ 2.8:
layui.form.switch('status', true)—— 第二个参数是布尔值,会同步 DOM 和 UI - Layui < 2.8:
$('input[value="123"]').prop('checked', true).next().click(),其中.next()是 Layui 生成的模拟开关容器 - 无论哪种方式,
form.on('switch()')都不会自动触发,你要自己补上状态更新逻辑(比如修改缓存、重绘单元格)
最易被忽略的是:表格分页后,你通过 ID 找到的 input 元素可能已不在当前 DOM 中——操作前务必确认该行是否在可视区域或先调用 table.cache 查找。


















