Layui表格不原生支持rowDouble事件,需在table.render()的done回调中用layui.$(elem).find('tbody tr').on('dblclick',...)绑定;双击时通过tr的data-index属性查table.cache'id'获取原始数据,须显式设置table id且确保缓存最新;移动端及IE11兼容性差,建议降级为单击+按钮或加防抖。
layui table 的 rowDouble 事件绑定方式
直接在 table.render() 的配置里加 done 回调里绑定,不是在 on 或 events 字段里写。layui 表格原生不支持 rowdouble 作为内置事件名,它只提供 row(单击)和 tool(工具栏),双击得自己监听 dom。
实操建议:
- 在
done回调中用layui.$(elem).find('tbody tr')找到表格行,再用.on('dblclick', ...)绑定 - 必须等表格渲染完成后再绑定,否则
tbody还没生成,事件挂不上 - 别用
document.on('dblclick', '.layui-table-body tbody tr', ...),Layui 表格会重绘(如排序、分页),委托容易失效或重复绑定
如何从双击事件里拿到当前行的原始数据
双击时拿不到 data,因为 tr 元素本身不存数据对象,只靠 data-index 属性关联。得靠这个索引去查 table.cache 缓存。
实操建议:
-
tr元素上有data-index属性,值是字符串,比如"2" - 对应的数据存在
table.cache['yourTableId'][index]里,注意下标要转成数字 - 表 ID 必须在
table.render()里显式设id: 'userTable',否则缓存键名不确定 - 示例:
layui.table.on('sort(userTable)', function(obj){ /* 排序时缓存会更新,所以双击前确保 cache 是最新的 */ });
为什么双击后 data-index 对不上缓存里的数据
常见错误现象:点第 3 行,data-index="2",但 table.cache['userTable'][2] 是空或错的数据——说明表格启用了 page: true 且没设 id,导致缓存被分页覆盖或 key 混乱。
实操建议:
- 必须为表格设置唯一
id,哪怕只是临时 ID,比如id: 'userListTable' - 如果用了
url异步加载,确保后端返回的data是数组,且没被额外包装(如套了{code:0,data:[...]}但没配parseData) - 不要在
done外提前读table.cache,它只在render完成或reload后更新
兼容性与性能注意点
双击事件在移动端基本无效,手指操作没有稳定“双击”概念;另外 Layui 2.8+ 在 IE11 下 dblclick 有延迟或丢失,别依赖它做关键操作。
实操建议:
- 业务上需要双击编辑的场景,建议降级为「单击选中 + 按钮触发编辑」,或加个长按模拟
- 如果坚持用双击,记得加防抖:
let timer; tr.on('dblclick', () => { clearTimeout(timer); timer = setTimeout(() => {...}, 200); }),避免手速快误触发两次 - 大量行(>500)时,
done里遍历所有tr绑事件会卡顿,改用事件委托到tbody,但要手动过滤掉th和空行
事情说清了就结束










