Layui数据表格如何实现点击某一行后弹出该行的详情-Layui教程-PHP中文网

Layui表格无原生rowClick事件，需在done回调中用setTimeout延时绑定tbody tr点击事件，并从layui.table.cache读取对应行数据；须用命名空间解绑或事件委托避免重复触发，推荐以data-id匹配真实数据而非依赖index。

layui table 的 rowClick 事件怎么绑定

直接用 done 回调或 initdone 都没法捕获单行点击——layui 原生表格没提供 rowclick 事件。必须靠监听渲染后的 dom 元素，且要等表格重绘完成后再挂事件。

正确做法是在 done 回调里用 layui.table.cache 获取当前页数据，并给 .layui-table-body tbody tr 绑定事件：

table.render({
  elem: '#demo',
  url: '/api/list',
  cols: [[{field:'id', title:'ID'}, {field:'name', title:'姓名'}]],
  done: function(res, curr, count){
    // 注意：这里必须用 setTimeout 或 nextTick，否则 DOM 还没更新
    setTimeout(() => {
      $('.layui-table-body tbody tr').on('click', function(){
        const index = $(this).index();
        const data = layui.table.cache['demo'][index]; // 'demo' 是 table 的 id 参数
        layer.open({content: JSON.stringify(data), area: ['400px', '300px']});
      });
    }, 10);
  }
});

别在 initDone 里绑，它触发时表格 body 可能还没生成
layui.table.cache 的 key 是你传给 elem 的选择器对应的 id（如 #demo → cache key 是 demo）
如果启用了分页，index 是当前页的行号，不是全量数据索引；需要结合 curr 和 limit 手动算真实下标

如何避免重复绑定导致多次弹窗

每次翻页、重载表格都会重新触发 done，若不清理旧事件，点一次就会弹出 N 个 layer。

解决方式只有两个：要么每次绑定前先解绑，要么只绑一次。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

推荐用命名空间解绑：$('.layui-table-body tbody tr').off('click.rowDetail').on('click.rowDetail', ...)
或者把事件委托到父容器（更稳妥）：$(document).on('click', '.layui-table-body tbody tr', ...)，但要注意避免跨页点击误触发
如果用了 table.reload()，记得同步调用 $(document).off('click', '.layui-table-body tbody tr') 再重绑

弹窗内容怎么匹配当前行的真实数据

直接读 $(this).find('td').eq(0).text() 不可靠——字段可能被格式化、隐藏、合并单元格，甚至带 HTML 标签。

必须从缓存里取原始数据，而不是 DOM 文本：

// ✅ 正确：从 cache 拿结构化数据
const cacheKey = 'demo'; // 表格实例名
const rowIndex = $(this).index();
const rowData = layui.table.cache[cacheKey][rowIndex];

如果用了 toolbar 自定义工具栏，event 参数里会带 data，比 DOM 绑定更准
开启 id 字段且设为 lay-id 属性时，可用 $(this).attr('data-index') 获取缓存下标（但依赖 layui 内部实现，不建议强依赖）
如果表格开启了 loading: true，done 触发时数据已就绪，可放心读 cache