最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
Layui表格行双击开启编辑模式实现方法
时间:2026-07-23 10:57:23 编辑:袖梨 来源:一聚教程网
Layui表格行双击事件必须在table.render()后绑定且tableId严格匹配,双击时通过obj.tr.data-index查table.cache获取当前行数据,移动端不支持需降级为长按或操作按钮。
table.on('rowDouble(tableId)') 必须在 render 之后绑定
行双击事件不会提前生效,哪怕你把监听写在 table.render() 前面也没用——layui 内部只在表格 dom 渲染完成、缓存建立后才开始派发该事件。很多“双击没反应”的问题,根源就在这一步时机错位。
- 监听代码必须紧接在
table.render()调用之后(推荐直接写在回调函数里) -
tableId必须和render配置中的id: 'xxx'完全一致(大小写敏感);如果只写了elem: '#demo'没设id,得用通配符写成rowDouble(*) - 动态插入的表格(比如弹窗里初始化的 table),要等
table.init完成后再监听,否则cache还没生成
双击后怎么拿到当前行数据?别碰 event.target
双击触发时,event 对象里没有现成的数据对象,也不能靠 $(this).find('td:eq(1)') 去取值——列顺序一变、加了固定列、开了服务端分页,立马取错或取空。
- 正确路径是:从回调参数
obj.tr上读data-index,再查table.cache['yourTableId'][index] - 服务端分页下,
table.cache只存当前页数据;前端分页才是全量 - 即使用了
skin: 'line'或size: 'sm',这个取法依然可靠
双击 = 编辑某列?别直接 focus input
Layui 表格默认单元格是纯文本(<div> 或 <span>),不是预埋好的 <input>。你在 rowDouble 回调里直接 find('td:eq(2) input').focus(),大概率找不到元素,白忙活。
- 真要双击编辑,得先手动把对应
td的内容替换成<input>,再聚焦 - 务必检查是否已有
.layui-table-edit(Layui 编辑态标记),避免重复替换 - 强烈建议加防抖(
setTimeout+clearTimeout),防止双击被识别为两次单击 - 如果列用了
templet,建议加data-editable="true"标记,便于统一判断
移动端双击根本不会触发,这不是 bug 是限制
Layui 2.8.x 及之前所有版本的 rowDouble 事件完全不响应触摸设备,底层依赖原生 dblclick,而 iOS/Android 浏览器默认禁用或延迟它。别费劲模拟 touchstart + 计时器——会和展开行、复选框点击冲突。
- 真实需求是“快速操作”,优先改用长按(
longpress)或右键菜单(contextmenu) - 若语义上必须是“双击”,PC 端走
rowDouble,移动端降级为操作列按钮(如toolbar: '#barDemo') - 不要试图 patch
table.js把 click 改成 dblclick——那改的是单元格编辑触发逻辑,和行双击无关,且破坏升级兼容性
相关文章
- 苹果折叠屏爆料汇总:售价超两万,比例阔折叠 07-30
- 纪念碑谷3 纪念碑谷3手游玩法详解与体验评测 07-30
- 晴空双子金卡阵容推荐 晴空双子高性价比氪金养成指南 07-30
- 大周列国志全新派系系统 07-30
- 兔小萌世界甜系小房间搭建指南 兔小萌世界高颜值甜系房间布置全流程详解 07-30
- 大周列国志全新剧本包西汉剧本包 07-30