Layui表格templet模板中如何获取当前行的原始JSON数据

阿芳吖_2457

阿芳吖_2457

2026-06-01

299人浏览

原创

layui表格templet中data即当前行原始数据,函数式需声明参数(如d),字符串模板用{{d.field}};字段名须与后端完全一致,嵌套对象支持d.user.name或{{d.user.name}};不可依赖layui.table.cache或this,避免undefined应先核对cols的field配置。

layui表格templet模板中如何获取当前行的原始json数据

templet 里直接用 data 就是当前行原始数据

在 Layui 表格的 templet 函数或字符串模板中,Layui 会自动把当前行的完整 JSON 数据作为第一个参数传入。你不需要额外查 DOM、不靠 layui.table.cache、也不用拼 ID 去找——只要函数签名对了,data 就是它。

常见错误现象:
• 写成 function() { console.log(data); } 却报 data is not defined
• 在字符串模板里写 {{ data.id }} 没反应(其实是写法对但没注意字段名大小写)
• 以为要手动绑定事件再取数据,结果绕远路

  • 函数式写法必须带参数:templet: function(d) { return d.title + '(' + d.status + ')'; }
  • 字符串模板里统一用 {{d.字段名}},不是 {{data.字段名}} —— Layui 固定传参变量名为 d
  • 字段名区分大小写,后端返回 {"user_name":"张三"},就不能写 {{d.userName}}
  • 如果字段是嵌套对象(如 user: {name: "李四"}),字符串模板里支持 {{d.user.name}},函数里直接 d.user.name

为什么不能在 templet 里用 layui.table.cache 或 this.config.id

有人试过在 templet 函数里去查 layui.table.cache['id'],或者试图从 this 取表格实例——这不可靠,且容易出错。

原因很简单:
• templet 是纯渲染函数,执行时不一定有完整的上下文环境
• layui.table.cache 是全局缓存,多表格时可能混用、异步加载后还没更新
• this 在箭头函数里是 window,普通函数里也未必指向表格实例

Wjs Localizing Video
Wjs Localizing Video

用于端到端视频本地化流程的轻量编排器,路由至四个专注子技能——/wjs-transcribing-audio、/wjs-translating-subtitles...

下载
  • templet 执行时机早于表格实例完全就绪,依赖 this 或缓存属于“赌运气”
  • 原始数据已由 Layui 主动注入,没必要绕一圈再查——既慢又脆弱
  • 唯一例外:你要跨行比对(比如当前行和上一行状态),才需要缓存,但那是另一层逻辑,不该塞进 templet

遇到 undefined 字段别急着改后端,先检查 cols 的 field 是否匹配

templet 里访问 d.xxx 是 undefined,90% 不是模板问题,而是列配置没对齐。

使用场景:
• 后端字段叫 create_time,但你在 cols 里写 field: 'createTime'
• 返回数据是数组,但 field 写成了对象路径(如 field: 'tags.0.name')——Layui 不支持这种解析

  • field 必须和后端返回的 key 完全一致(包括下划线/驼峰/大小写)
  • 如果字段是数组,templet 里可以 d.tags && d.tags[0] && d.tags[0].name 安全访问
  • 字符串模板不支持三元或逻辑运算,{{d.tags.length > 0 ? d.tags[0].name : ''}} 会报错,得用函数式 templet
  • 开启 response: { data: 'list' } 时,确保后端返回结构真包含该字段,别被包装层遮住

templet 函数里修改 d 不影响原始数据,但别改引用类型字段

你可以放心在 templet 函数里给 d 加临时字段(比如 d.statusText = d.status === 1 ? '启用' : '停用'),这不会污染原始 JSON。但要注意:

  • 修改对象或数组字段(如 d.user.name = '王五')会影响其他地方——因为引用没变
  • 如果后续要用 table.reloadData(),这些临时改动会消失,别把它当状态管理用
  • 想加 UI 相关标记(比如图标 class、颜色 style),推荐用独立变量,而不是往 d 上挂:const cls = d.status === 1 ? 'layui-badge-success' : 'layui-badge-gray';

复杂点在于:原始数据结构越深、字段命名越不规范,templet 里做判断就越容易漏 null;最容易被忽略的是后端返回空字符串 ""、字符串 "null"、或字段压根缺失这三种情况,它们都导致 d.xxx 访问时静默失败,建议统一用可选链或兜底处理。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2023.08.07

2055

5

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.23

3022

1

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

2023.10.13

1036

3

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

2025.09.10

3419

7

ajax教程
ajax教程

php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

2023.06.14

2680

4

ajax中文乱码解决方法
ajax中文乱码解决方法

ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.31

340

5

ajax传递中文乱码怎么办
ajax传递中文乱码怎么办

ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.11.15

2513

5

ajax网站有哪些
ajax网站有哪些

使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.09.24

1141

6

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WEB前端教程【HTML5+CSS3+JS】
WEB前端教程【HTML5+CSS3+JS】

共101课时 | 20.9万人学习

JS进阶与BootStrap学习
JS进阶与BootStrap学习

共39课时 | 4.8万人学习