table.on('edit(filter)') 是唯一入口,必须与 table.render 的 lay-filter 值严格一致(大小写、空格、引号均需匹配),且列须显式配置 edit: 'text';回调首行必写 e.preventDefault(),校验应在 blur 或 enter 时触发,更新仅用 table.updateCell,禁用 reload。

table.on('edit(filter)') 是唯一入口,但必须配对 render 的 lay-filter
监听 edit 事件不是“加个 on 就行”,而是严格依赖 lay-filter 值完全一致。比如你渲染表格时写的是 table.render({ elem: '#userTable', lay-filter: 'userTable' }),那监听就必须写 table.on('edit(userTable)', callback)——大小写、空格、引号都不能差。漏掉这个,控制台静默失效,连 warning 都不报。
常见错误现象:表格能编辑,但 edit 回调死活不触发。90% 是 filter 不匹配,剩下 10% 是列没加 edit: 'text'(比如只写了 templet 却忘了配 edit)。
- 列配置必须显式声明
edit: 'text',否则该列不可编辑,edit 事件也不会触发 - 如果用了
templet,默认禁用内置编辑;要保留模板又支持编辑,得手动加contenteditable="true",但此时edit事件不再触发 - 动态 reload 表格后,
table.on('edit(...)')不会自动继承,必须重新绑定一次
第一行必须写 e.preventDefault(),否则校验全是马后炮
layui 的 edit 事件是同步触发的,默认行为是立刻更新 DOM 和 table.cache。不拦住,非法值已经落库,再弹提示、再改 input 都晚了。所以回调里第一行只能是:e.preventDefault()。
e.value 是用户刚输的字符串,e.oldValue 在部分版本中不可靠(可能为 undefined),稳妥做法是从 DOM 取原始值:e.tr.find('td[data-field="' + e.field + '"]').text().trim()。
- 别用
return false替代e.preventDefault(),它不阻止数据写入,只终止事件冒泡 - 验证失败后,必须两步还原:先改 input 值,再改 td 文本,否则界面和缓存不一致
- 还原后建议调
$(e.elem).focus().select(),光标回到输入框并全选,方便重输
校验时机必须是 blur 或 enter,不能一输入就发请求
edit 事件本身不是“编辑结束”的信号,它只是“值变了”。真实校验必须等用户明确提交——也就是失焦(blur)或按回车(keydown.enter)。在 edit 回调里给当前 input 绑定一次性事件最稳:
layui.jquery.one('blur', e.elem, function() {
// 这里做校验、发请求、恢复、提示
});
- 用
layui.jquery.one()而不是on(),避免重复绑定导致多次请求 - 请求发出前给 input 加
disabled或 classlay-editing,防连点 - 移动端要注意键盘收起延迟,可加
setTimeout(..., 100)兜底 - 别在
templet里写oninput,DOM 重绘后事件丢失,校验逻辑直接失效
验证通过后只用 table.updateCell,禁用 reloadData
table.reloadData() 或 table.reload() 会销毁所有编辑态,正在 focus 的 input 瞬间消失,刚改的值也可能被接口返回的老数据覆盖。安全更新的唯一方式是:table.updateCell(e.id, e.field, e.value.trim())。
注意 e.id 必须对应真实主键字段。如果你在 cols 里写了 id: 'uid',那 e.id 就是该行 data.uid 的值;如果数据源里没有 uid 字段,或字段名拼错,updateCell 就找不到目标行。
- 验证失败时,除了还原 input 和 td,还得手动更新 cache:
table.cache['userTable'][e.trIndex][e.field] = oldValue - 提示要用
layer.tips(msg, e.tr.find('td[data-field="' + e.field + '"]'), {tips: [1, '#ff6a00']}),每次调用前先layer.close(tipsIndex)清旧提示 - 数字字段校验别用
isNaN(+v),应先v.trim()再判断,否则 “123 ”会被当成合法数字
关键复杂点在于:edit 事件不是“提交完成”,而是“值变更开始”;真正需要拦截、校验、反馈、同步的整套流程,全得你手动补全。没人替你管缓存、DOM、UI 状态的一致性——漏掉任意一环,就会出现“界面上看着对,数据库里是错的”这种难排查问题。











