Layui表格如何获取当前点击单元格的字段名field

老伟姑娘_8769

老伟姑娘_8769

2026-04-05

484人浏览

原创

Layui表格cell事件中event.field为undefined,因官方未挂载该属性;应通过event.td.dataset.key提取列索引再查config.cols0.field。

点击单元格时怎么拿到对应的 field?

layui 表格的单元格点击事件本身不直接暴露 field,必须通过事件对象反查列配置。关键在 event.tr(或 event.td)和表格实例的 config.cols 对齐索引。

  • 监听 table.on('cell(filter)', callback),这是唯一能精准捕获单个单元格点击的内置事件
  • callback 的第二个参数是 event,它包含 event.cell(DOM 元素)、event.tr(所在行)、event.td(当前 <td>) <li>用 <code>event.td.cellIndex 获取该单元格在行内的列序号(从 0 开始)
  • 再根据这个序号去查 table.config.cols[0][index](假设只有一级表头),取其 field 属性
  • 为什么 event.field 是 undefined?

    Layui 2.8.x 及之前版本的 cell 事件回调中,event 对象**没有 field 字段**——这是文档没写清楚、但源码里确实没挂载的常见误解点。

    • 官方示例里出现的 event.field 多为用户自己补的逻辑,不是 Layui 原生提供
    • 如果直接打印 event,你会看到 event.colspan、event.rowspan,但没有 field
    • 错误做法:试图解构 { field } 或读 event.field → 一律返回 undefined

    合并表头(多级表头)时 cellIndex 还准吗?

    不准。当存在 colspan 或 rowspan 时,event.td.cellIndex 返回的是 DOM 表格结构里的物理列序,而 config.cols[0] 是逻辑列定义,二者可能错位。

    • 简单场景(无合并):用 cellIndex 查 cols[0] 安全
    • 有合并表头时:必须遍历 config.cols[0],比对 event.td 的 dataset.key(Layui 内部会为每个 <td> 注入 <code>data-key,值形如 "layui-table-cell-0-2",末尾数字即列索引)
    • 稳妥写法:const key = event.td.dataset.key?.split('-').pop() || '0'; const col = table.config.cols[0][key];
    • 完整可抄的获取逻辑(含兼容处理)

      别拼接字符串或手动维护映射,直接靠 dataset.key 最稳。以下代码可直接塞进 cell 回调里:

      table.on('cell(test)', function(obj){
        const td = obj.event.target.tagName === 'TD' 
          ? obj.event.target 
          : obj.event.target.closest('td');
        
        if (!td) return;
        
        // 优先用 data-key(Layui 自动加的)
        const key = td.dataset.key?.match(/-\d+$/)?.[0]?.slice(1);
        if (key != null && table.config.cols[0][key]) {
          console.log('field:', table.config.cols[0][key].field);
        }
      });
      

      注意:如果列配置里没设 field(比如用了 templet 但漏写 field),那取出来就是 undefined —— 这不是代码问题,是配置缺失。

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
ajax教程
ajax教程

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

2023.06.14

3060

4

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

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

2023.08.31

360

5

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

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

2023.11.15

2873

5

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

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

2024.09.24

1161

6

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

2026.10.22

60

11

Gradle Wrapper配置教程
Gradle Wrapper配置教程

本专题介绍Gradle Wrapper的基本作用,涵盖文件组成、生成方法、版本配置和任务调用,帮助你理解项目如何使用指定的Gradle版本,减少不同开发环境带来的构建差异。

2026.10.22

40

10

Golangci-lint检查器使用教程
Golangci-lint检查器使用教程

本专题整理Golangci-lint常用Linters的用途与配置方法,覆盖错误处理、无效代码、安全、复杂度、命名和依赖检查,帮助项目合理选规则。

2026.10.22

40

15

Gradle怎么构建Java项目
Gradle怎么构建Java项目

本专题介绍Gradle Java项目构建方法,涵盖Java插件配置、依赖声明、源码编译、测试执行和打包检查,帮助你理解各阶段的任务关系,逐步完成项目构建。

2026.10.22

20

10

PHP时间戳漏洞修复教程
PHP时间戳漏洞修复教程

本专题汇总PHP常见时间戳漏洞,包括2038年溢出、时区漂移、时间戳伪造、重放攻击、时间盲注与日志审计失效等,并给出升级64位环境、使用 DateTimeImmutable、统一UTC、严格超时校验、预处理绑定、hash_equals 比对等修复方案,帮助开发者快速排查和加固时间相关代码。

2026.10.22

40

25

热门下载

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

精品课程

更多
热门推荐
/
最新课程
phpStudy极速入门视频教程
phpStudy极速入门视频教程

共6课时 | 54.7万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时 | 134万人学习