layui table双击行需用table.on('rowDouble(tableId)')监听,且必须在render后执行;获取数据须通过tr.data('index')查table.cache;移动端不支持双击,建议改用长按或操作列按钮。
layui table 双击行没反应?先确认是否绑对了事件
layui 的 table.on('rowdouble(tableid)') 是唯一支持双击行的原生事件,不是 on('row') 加 dblclick 模拟——后者在表格重绘、复选框/展开行等场景下极易失效。这个事件必须在 table.render() 之后、且表格已渲染完成才可监听。
- 监听必须写在
table.render()调用之后,不能提前 -
tableId必须与render()中配置的id完全一致(区分大小写) - 如果用了
elem: '#id'但没设id参数,事件名得写成rowDouble(*)(通配符),否则不触发 - 表格容器若被动态插入(如弹窗内),需确保监听时机在
table.init完成后
双击获取当前行数据:别直接用 event.target 找 td
双击时 event 对象里没有现成的行数据,必须从 tr 元素往上找 data-index,再用 table.cache 查——这是最稳的方式。手动遍历 td 或靠 $(this).find('td:eq(1)') 取值,在固定列、隐藏列、服务端分页等场景下会错位或取空。
- 正确做法:
var data = table.cache['yourTableId'][tr.attr('data-index')] -
tr来自事件回调的obj.tr,不是event.target - 如果用了
page: false(前端分页),table.cache是全量数据;服务端分页则只有当前页 - 注意:若表格启用了
skin: 'line'或size: 'sm',不影响该取法
双击编辑某列?别在 rowDouble 里直接聚焦 input
直接在 rowDouble 回调里用 $(obj.tr).find('td:eq(2) input').focus() 很容易失败——因为 layui 表格的单元格内容是纯文本(div 或 span),并非预先渲染好的 input。真要双击编辑,得先用 obj.tr.find('td:eq(n)') 替换内容为输入框,再聚焦。
- 替换前记得保存原始文本,失焦时还原或提交
- 避免重复替换:检查
td内是否已有input,有就跳过 - 强烈建议加防抖(
setTimeout+ 清除),防止双击误触发两次 - 如果列用了
templet自定义模板,需在模板里预留可编辑标记(如data-editable="true")
移动端双击失效?这不是 bug,是设计限制
layui 2.8.x 及之前版本的 rowDouble 事件完全不响应触摸设备——它底层依赖 dblclick 原生事件,而 iOS/Android 浏览器默认禁用或延迟该事件。不要试图用 touchstart + 计时器模拟双击,会和表格自身的点击展开、复选冲突。
- 真实需求是“快速操作”,建议改用单击长按(
longpress)或右键菜单(PC+移动端都可用contextmenu) - 若必须双击语义,只能降级处理:PC 端走
rowDouble,移动端改用操作列按钮(如toolbar: '#barDemo') - 注意:layui 3.0 尚未发布,目前无官方移动端双击支持
双击这事看着简单,但跨环境、跨版本、跨交互模式的兼容性细节特别碎——尤其是 cache 数据结构变化、tr 动态重建、以及移动端的事件链断裂,最容易在上线后突然冒出来。










