必须用 table.on('row(tabledemo)') 监听行事件,配合 layer.open({type: 1, content: '...'}) 渲染格式化 json;禁用 type: 2 iframe,需过滤非 json 字段并兜底处理循环引用、date 等特殊值。
直接用 table.on('row(你的表id)') 监听,配合 layer.open({type: 1}) 渲染格式化 json,别用 type: 2 iframe —— 否则看不到原始结构、无法控制样式、还容易被同源策略卡住。
必须用 row 事件,不能绑原生 click
Layui 表格是动态渲染的,tr 节点在分页、搜索后会被替换。原生 click 绑定到 $('tbody tr') 或 done 回调里遍历 DOM 的方式,翻页后就失效。
- 监听写法必须是
table.on('row(tableDemo)', function(obj){...}),其中tableDemo是你table.render()里配置的id值,大小写敏感 - 确保
table.render()已执行完毕再调用table.on(),推荐放在同一作用域末尾,或done回调内 -
obj.data就是当前行原始数据对象,不用再从 DOM 取值;obj.tr是当前行 DOM 元素,可用于高亮等操作
弹窗必须用 type: 1 + content 字符串,不是 type: 2
type: 2 是 iframe 加载外部页面,传不进 JSON 对象,也做不到“显示该行的 JSON”这个需求。真要展示结构化数据,得自己拼 HTML 内容。
- content 推荐用
<pre class="brush:php;toolbar:false;" style="text-align:left;padding:10px;max-height:400px;overflow:auto;">${JSON.stringify(obj.data, null, 2)}</pre> - 加
maxmin: true允许用户最大化查看深层嵌套字段 - 避免把大段 HTML 拼在 JS 里,可用隐藏
<script type="text/html"></script>模板预定义结构 - 别忘了设
offset: ['20px', 'right']让弹窗贴右显示
JSON 序列化前要过滤和兜底
直接 JSON.stringify(obj.data) 很危险:遇到 Date、undefined、RegExp、循环引用、Layui 内部字段(如 _LAY_TABLE_INDEX)会报错或输出空字符串。
- 只取业务字段构造新对象:
const safeData = {id: obj.data.id, name: obj.data.name, ...} - 若字段全为纯 JSON 类型,可用
JSON.parse(JSON.stringify(obj.data))浅拷贝 - 含函数或特殊对象时,改用
Object.assign({}, obj.data)并手动delete掉非业务属性 - 对可能为字符串的字段(比如后端返回的
"info": "{...}"),加try/catch包裹JSON.parse()再嵌套展示
最易被忽略的是时间字段和内部属性 —— 后端返回的发布时间是 2026 年 6 月 20 日,但 obj.data.create_time 可能已是格式化后的字符串,原始时间戳早没了;_raw 这类字段如果没在 parseData 里显式保留,双击时就再也拿不回来。










