Layui table edit失焦后需用table.on('edit(filterName)')监听而非原生blur事件,它在真正完成编辑时触发并提供新旧值等参数;保存前须trim、校验、防重复提交,并同步更新缓存或重载表格。

layui table edit 失焦后怎么触发保存?
Layui 的 edit 属性只负责渲染可编辑输入框,**不会自动保存**,更不会发请求。所谓“失焦保存”,得自己监听 blur 事件,再调用 table.cache 拿到当前行数据,手动提交。
常见错误是直接在列配置里写 edit: 'text' 就以为完事了,结果改完一失焦,页面刷新数据就回退——因为压根没发请求,也没更新缓存。
- 必须给表格容器绑定
blur事件,且委托到.layui-table-edit输入框上(动态生成的) - 通过
$(this).closest('tr')找到行索引,再用table.cache['your-id'][rowIndex]拿原始数据 - 注意:
table.cache里的值是修改后的,但可能含空格、未 trim,别直接当最终值用 - 如果用了
lay-filter,推荐用table.on('edit(filterName)', ...)监听,它比手动绑blur更稳(内部已做防抖和焦点判断)
用 table.on('edit') 而不是原生 blur 的原因
table.on('edit(filterName)') 是 Layui 封装好的编辑事件,它在用户确认编辑(失焦或回车)后触发,并自带当前行、字段、新旧值,省去手动找 DOM 和解析的麻烦。
原生 blur 容易误触:比如点击表头排序、切换分页、弹出 layer,都会导致输入框失焦,但此时用户根本没想保存。
-
table.on('edit')只在真正完成一次编辑时触发(包括回车、点击其他单元格、点击空白处) - 回调参数
obj有obj.tr(当前行 DOM)、obj.field(字段名)、obj.value(新值)、obj.oldValue(旧值) - 若需阻止默认行为(比如校验失败不保存),可直接
return false - 兼容性更好:Layui 2.8+ 对
edit事件做了 focus/blur 冲突处理,老版本手动绑blur容易漏掉回车场景
保存前要校验和清理哪些内容?
用户输的内容不能直接塞进数据库:空格、换行、超长、特殊字符、非数字类型都可能引发后端报错或注入风险。
- 用
$.trim()去首尾空格,避免“ 123 ”被当成不同值反复提交 - 对数字字段,用
parseFloat()或正则过滤非数字字符,防止用户输“123元”导致后端转换失败 - 长度限制建议前后端双校验;前端用
value.length > 50提前拦截,别等接口返回 400 - 敏感字段(如用户名、邮箱)建议加
type="text"+pattern或 JS 正则校验,减少无效请求 - 若该字段是下拉选择(
edit: 'select'),obj.value是 option 的value,不是文本,别拿错
发请求保存时容易忽略的三个点
保存动作看似简单,但实际线上最容易出问题的是请求时机、重复提交、以及缓存同步。
- 必须加 loading 状态(比如禁用输入框或加
lay-submiting类),否则用户狂点会发出多个相同请求 - 成功后建议调用
table.reload()或手动更新table.cache,否则页面显示还是旧值,用户以为没保存成功 - 如果后端返回失败(如唯一键冲突),要在 UI 显示具体错误(比如用
layer.tips()标红单元格),而不是只 console.error - 注意:Layui 表格不维护服务端状态,
cache是纯前端快照,哪怕后端已改库,前端不 reload 就永远不知道
obj.value 当成原始输入(其实它已经被 Layui trim 过、转义过)。这些细节不卡点,上线后就卡用户。


















