Layui表格单元格编辑edit如何实现失焦自动保存到数据库

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