唯一可靠方式是 table.on('tool(filter)'),需确保 lay-filter 与 lay-event 值严格一致、按钮置于 td 内、禁用 onclick,且优先使用 obj.del() 和 obj.update() 操作数据。
必须用 table.on('tool(filter)'),别写 click 绑定
行内按钮(如编辑、删除)点击事件,唯一可靠方式是 table.on('tool(filter)')。直接用 $().on('click', ...) 或在模板里写 onclick="" 都会失效——因为 layui 表格动态渲染,分页、搜索、重载后 dom 节点被替换,原生绑定丢失。table.on() 是事件委托,由 table 模块自动接管新插入的按钮。
-
filter必须和表格初始化时lay-filter="xxx"的值完全一致(大小写、空格全敏感) - 每个按钮必须带
lay-event="xxx",这个字符串就是回调中obj.event的值 - 模板中禁止出现
onclick="",它会干扰 Layui 的事件捕获流程 - 按钮必须放在
<td> 内部,不能套在额外 <code><div> 或 <code><span></span>里,否则 Layui 不识别lay-event值不匹配是“点不动”的最常见原因按钮渲染出来了,但点击没反应?90% 是
lay-event和监听代码对不上。比如模板写lay-event="del",但回调里写if (obj.event === 'DEL')或'delete',条件直接跳过。- 复制粘贴时容易混入全角空格或不可见字符,检查开发者工具中元素属性是否为
lay-event="del"(前后无空格) - 建议统一用小写字母 + 下划线,如
lay-event="edit_row"、lay-event="del_record" - 调试时第一件事:在回调开头加
console.log(obj.event),点一下按钮立刻确认传过来的是什么 - 避免用中文或特殊符号作
lay-event值,编码和转义问题多,后期维护成本高
操作行数据优先用
obj.del()和obj.update()拿到
obj.data后发请求没问题,但删/改行本身要交由 Layui 处理——它会同步更新缓存、刷新视图、维持分页状态。直接操作obj.tr或手动从data数组里 splice,会导致后续翻页、搜索数据错乱。
jQuery点击事件遮罩弹出层可移动特效代码下载"jQuery点击事件遮罩弹出层可移动特效代码下载。一款jquery弹出层插件制作注册表单点击按钮弹出层表单提交效果,可支持拖到的jQuery弹出层效果。标题、高度、宽度等可以自定义弹出层js插件。
-
obj.del():安全删除当前行,内部已处理 DOM 移除、缓存清理、合计更新 -
obj.update({ field: 'new value' }):局部更新某字段,不触发整行重绘,比重新赋值data更稳 - 不要在回调里调用
table.reload()刷新整表——除非必要,性能差且易丢焦点、滚动位置 - 如果需异步成功后再更新 UI,确保服务器返回成功才调用
obj.del()或obj.update(),避免误删
多个按钮共用一个
lay-event名?不推荐有人为了省事给不同功能按钮都设成
lay-event="action",再靠按钮文本或 class 区分逻辑。这非常脆弱:i18n 翻译后文本变、动态文案更新后判断失效、DOM 查询慢还容易出错。- 列配置里拆成不同事件名更清晰:
{type: 'button', event: 'approve', title: '通过'}和{type: 'button', event: 'reject', title: '驳回'} - 回调里用
if (obj.event === 'approve')直接分支,语义明确、无耦合 - 真要复用(如批量操作),也应通过
obj.data中的字段判断状态,而不是查 DOM
lay-filter和lay-event字符串严丝合缝。漏掉任意一环,事件就静默失败——没有报错,也没有日志,只留下一个“点不动”的按钮。 - 复制粘贴时容易混入全角空格或不可见字符,检查开发者工具中元素属性是否为










