layui table编辑时拿不到原始值是因为edit事件不提供oldvalue,需在cell事件中提前缓存obj.celldata到tr元素,edit事件中再读取;blur等原生事件不可靠且易出错。

layui table 编辑单元格时拿不到原始值?因为没监听对事件
layui 的 table.on('edit(...)') 事件触发时,event.oldValue 并不存在 —— 这是常见误解。官方 API 明确说明该事件只提供 event.value(新值)和 event.field(字段名),**不返回修改前的值**。原始值必须你自己存。
用 cell 事件 + data 缓存提前抓原始值
在用户双击进入编辑前,cell 事件会先触发,此时单元格内容还是原始状态,且能拿到完整行数据。这是最可靠、无侵入的时机。
实操建议:
- 给 table 实例绑定
table.on('cell(filter)', ...),在回调里把当前行的data[field]存到一个临时 Map 或直接挂到tr元素上(比如$tr.data('orig-' + field, value)) - 后续在
edit事件中,通过event.tr拿到 DOM 行,再取回缓存的原始值 - 注意:如果表格启用了
url分页或异步重载,缓存需随数据刷新同步清理,否则可能错位
示例片段:
<pre class="brush:php;toolbar:false;">table.on('cell(test)', function(obj){
const $tr = $(obj.tr);
$tr.data('orig-' + obj.field, obj.cellData);
});
table.on('edit(test)', function(obj){
const $tr = $(obj.tr);
const oldValue = $tr.data('orig-' + obj.field) || '';
console.log('原值:', oldValue, '新值:', obj.value);
// ✅ 此时 oldValue 就是编辑前的真实值
});
为什么不用 blur
或 keydown 监听 input?
手动监听单元格内 input 的原生事件看似直接,但有明显隐患:
- layui 编辑框是动态创建/销毁的,
blur可能触发多次(比如点击其他单元格时连续触发) - 用户按 Enter 提交、ESC 取消时,input 已被移除,
blur拿不到上下文 - 移动端软键盘收起行为不可靠,
blur触发时机混乱 - 绕过 layui 内部机制,后续升级容易 break
进阶:需要支持“取消编辑后恢复原值”怎么办?
layui 默认取消编辑(ESC)不会触发任何事件,也不还原 DOM 文本 —— 它只丢弃 input,让 td 回到初始 innerHTML。所以如果你改过单元格 HTML(比如加了 badge),原值可能已丢失。
稳妥做法:
- 在
cell事件里不仅存data[field],也存$(obj.td).html()(仅当需要保留富文本格式时) - 监听
table.on('tool(...)')或自定义按钮做“手动取消”,配合table.cache或本地缓存回填 - 避免直接操作
td.innerHTML,优先用lay-event+templet控制渲染逻辑
真正容易被忽略的是:cell 事件在表格重绘(如排序、搜索、reload)后依然有效,但你挂载的 $tr.data() 会丢失 —— 所以每次 reload 后必须重新绑定或重建缓存。











