Layui表格不支持行双击整行编辑,需通过rowDouble事件定位可编辑列并模拟click触发内置编辑;移动端应降级为点击或长按;编辑后数据存于table.cache中,非原始data数组。
layui 表格原生不支持「行双击 → 整行编辑」,必须拆解为「双击行 → 定位目标列 → 触发该列编辑」,且不能依赖 edittrigger: 'dblclick' 直接生效——它只对单列有效,不作用于整行。
为什么直接配 rowDouble 事件进不了编辑态
因为 table.on('rowDouble(filter)') 只是通知你“哪一行被双击了”,它不自动打开任何单元格的编辑框。Layui 的编辑入口完全由列配置驱动,rowDouble 本身不触发 edit 生命周期,也不会渲染 input 或聚焦。
- 写了
table.on('rowDouble(id)', ...)却没后续动作,等于监听了个寂寞 - 试图在回调里手动
$td.find('input').focus():失败,因为默认状态下 td 里根本没有input,只有纯文本<div lay-unselect> - 漏掉
table.cache查数据步骤,直接用obj.tr遍历td取值:列顺序一变或开了固定列就错
正确做法:双击行 → 找到可编辑列 → 模拟一次 click
核心是复用 Layui 内置编辑逻辑,而不是自己造 input。它稳定、兼容缓存更新、能触发 table.on('edit')。
- 确保目标列已配置
edit: 'text'(或其他类型),且未使用templet - 在
rowDouble回调中,用$(obj.tr).find('td').eq(n)定位第 n 列(比如用户名列),再找其内部的div[lay-unselect] - 对该
div调用.click(),Layui 会识别并自动替换成 input、聚焦、绑定回车/失焦保存逻辑 - 加
e.stopPropagation()防止双击先触发一次单击(导致光标跳动或重复编辑)
table.on('rowDouble(test)', function(obj){
var $td = $(obj.tr).find('td').eq(1); // 假设第2列可编辑
var $editDiv = $td.find('div[lay-unselect]');
if ($editDiv.length) {
$editDiv.click(); // 触发内置编辑流程
}
});
移动端必须降级,别硬扛双击
iOS Safari 和多数安卓 WebView 对 dblclick 支持极差:可能缩放页面、选中文字、或完全无响应。Chrome 模拟器测出来能用,真机上大概率失效。
- 不要加
touch-action: manipulation试图修复——它治标不治本,且和表格其他手势(如拖拽排序)冲突 - 用
layui.device().mobile检测,PC 端走rowDouble,移动端统一改用操作列按钮(toolbar: '#bar')或长按事件 - 如果坚持要“双击语义”,至少把移动端 fallback 到
click+ 明确提示(比如 tooltip 写“点击编辑”)
编辑完的数据在哪?别去原始 data 数组里翻
用户改完内容、回车或失焦后,新值不会自动写回你初始化时传入的 data 数组,而是存在 table.cache['test'] 中,结构为 {'0': {...}, '1': {...}},key 是 data-index。
-
table.on('edit(test)', function(obj){ console.log(obj.value, obj.data); })是唯一可靠的数据出口 - 提交前务必从
table.cache['test'][obj.dataIndex]拿最新值,否则拿到的是旧快照 - 服务端分页下,
table.cache只存当前页数据;前端分页才是全量,这点容易被忽略


















