layui table 的 edit 属性默认仅响应单击而非双击,需通过 rowDouble 事件手动触发编辑:禁用默认 edit,用 templet 渲染文本,监听 rowDouble 定位目标单元格的 lay-unselect div 并 click 模拟编辑,同时绑定 edit 事件捕获变更。
layui table 的 edit 属性默认不响应双击
layui 的表格列配置里写 edit: 'text',只支持单击触发编辑,这是底层事件绑定逻辑决定的——它监听的是 click,不是 dblclick。想双击才进编辑,得自己接管事件,绕过默认行为。
用 on('rowDouble') 手动触发编辑单元格
核心思路是:拦截双击行事件,定位到目标单元格,再模拟一次单击编辑触发。注意不能直接调用 td.click(),因为 layui 编辑态依赖内部状态和事件委托,得走它的 API。
- 必须先通过
table.on('rowDouble', ...)捕获双击事件,拿到tr和td元素 - 用
$(td).find('div[lay-unselect]')找到可编辑内容容器(layui 会把文本包在带lay-unselect的div里) - 对这个
div触发一次click,触发内置编辑逻辑 —— 这比手动创建 input 更稳妥 - 要加
event.stopPropagation(),否则双击会先触发一次单击(进入编辑),再触发双击(又进一次),导致光标错乱或输入框重复
table.on('rowDouble', function(obj){
var $td = $(obj.tr).find('td').eq(2); // 假设第3列可编辑
var $editDiv = $td.find('div[lay-unselect]');
if($editDiv.length){
$editDiv.click();
}
});
禁用默认单击编辑,避免双击冲突
如果保留 edit: 'text' 又加双击逻辑,用户单击也会进编辑,跟需求矛盾。所以得关掉默认单击,只留双击路径。
- 列配置中去掉
edit字段,改用templet渲染纯文本,不带任何编辑钩子 - 所有编辑入口统一收口到双击事件里,避免行为分裂
- 注意:
templet返回的 HTML 里不要有lay-event或其他可能触发 click 的交互属性 - 如果用了
toolbar或自定义操作列,确保它们的点击事件不被双击事件误捕获(加event.target判断)
双击编辑后回车保存失败?检查 done 回调是否被覆盖
手动触发编辑后,layui 内部仍会走原有保存流程,但如果你在 edit 列上删了 edit 配置,done 回调就收不到更新数据。必须显式监听 table.on('edit', ...) 来捕获值变更。
-
table.on('edit', function(obj){ console.log(obj.value, obj.field, obj.data); })是唯一可靠的数据出口 - 别指望
form.on('submit(...)或表单提交事件能捕获表格内编辑,它们是两套机制 - 如果用了远程保存,这里拿到
obj.data后建议用obj.data.id做唯一标识,避免因重绘导致 data 引用失效
双击编辑看着简单,实际卡点全在事件时机和状态同步上——比如表格重载后 rowDouble 绑定失效、动态列下 td.eq(n) 索引错位、移动端双击变放大。这些没显式处理,上线后第一周准出问题。











