当前位置: 首页 > news >正文

Layui表格怎么实现在表头的右侧添加一个自定义配置图标

Layui table 表头右侧加配置图标需自定义列 title 为 HTML 字符串并绑定事件委托;title 要双层转义,用 data-field 标识列,图标点击须用 $(document).on('click', 'th .layui-icon-set', ...) 获取 field 并查列配置。layui table 表头右侧加配置图标,本质是改 toolbar 渲染位置Layui 的 table 默认只支持在表格顶部(toolbar 区域)或每行右侧(cols 中的 toolbar 模板)放按钮,表头单元格右侧没有原生 API。所谓“表头右侧”,实际是指某个列标题末尾插入图标,比如「姓名」列标题后面加个 ??。这得靠自定义列标题(title 配置为 HTML 字符串)+ 手动绑定事件实现。不能直接用 toolbar: true,它只作用于表格顶部工具栏,和表头无关title 字段支持 HTML,但必须提前转义风险字符(如 <、>),否则被过滤图标点击后若需操作当前列(比如排序开关、显示隐藏控制),得靠 data-field 属性或列索引定位用 title 写 HTML + data-field 标识列在列配置中把 title 设为带图标的 HTML 字符串,并确保该列有唯一 field 值,方便后续事件处理。注意:Layui 会自动对 title 做一次 escape,所以得用双层转义或改用 unshift 后手动注入(更稳妥)。推荐写法:title: '姓名<span class="layui-icon layui-icon-set" style="margin-left:4px;cursor:pointer;" data-field="username"></span>'必须加 style="cursor:pointer",否则鼠标悬停无反馈,用户不知道可点data-field 值要和列的 field 一致,避免后期查列配置时对不上图标用 layui-icon 类,别用外部 SVG 或 img,否则样式不统一、缩放错位图标点击事件必须用事件委托绑定因为表头是表格初始化时动态生成的,直接 $('span[data-field]').on('click') 会失效。必须挂到 table 容器或 document 上,用事件委托。 跃问 跃问是由阶跃星辰开发的免费AI智能问答助手,随时帮你智能搜索、高效阅读、识图理解、和你畅聊感兴趣的话题。

http://www.jsqmd.com/news/684350/

相关文章:

  • 支付机构必看:网联平台RCMP前置系统实战解析,从映射额度到结算的完整避坑指南
  • Python与OpenAI API实战:快速构建AI对话服务
  • 2026届学术党必备的六大AI学术神器解析与推荐
  • 算法训练营第七天 | 环形链表 扭捏快指针步步退,霸道慢指针狠狠追
  • Peer-Link断了怎么办?一次生产环境M-LAG故障排查与恢复实录
  • Layui如何实现表格内部的图片点击后进入相册轮播模式
  • Android 本地音乐播放(读取系统媒体库 + MediaPlayer)
  • 从5G回看通信原理:那些课本上的概念(OFDM、多址、衰落)到底是怎么用的?
  • 双非跨考哈工大计算机,我是如何用CSAPP和真题啃下854专业课的?
  • 从原理到防御:深入解析泛洪攻击(Flood Attack)的攻防博弈
  • nli-MiniLM2-L6-H768在教育行业落地:学生问答自动归类与知识点匹配案例
  • 当AI的“记忆仓库“塞不下时,它们是怎么聪明腾地方的?
  • Python类方法怎么定义@classmethod与@staticmethod区别
  • 终极指南:5分钟掌握LunaTranslator游戏翻译工具
  • MongoDB安装
  • 大语言模型推理能力全解析:从情感分析到主题识别,一行提示搞定NLP任务(附代码)
  • Docker集群网络配置失效全复盘(跨主机通信中断的7个隐性根源)
  • Python 字典高效合并与重复键自定义处理指南
  • mysql如何配置审计日志输出_mysql audit_log_format设置
  • RoCE测试(笔记)
  • 基于CNN的情感识别模型实战:从数据增强到部署优化
  • 046、使用单元测试框架测试FreeRTOS任务与模块:从一次深夜调试说起
  • 高维非线性抛物型PDE求解:FBSDE框架与局部线性回归技术
  • Python 7 天入门 day_05:示例代码跟着敲
  • 量化感知训练QAT失效?内存带宽瓶颈难突破?,.NET 11 AI推理面试必考的4类底层陷阱与绕过方案
  • KrkrzExtract:新一代krkrz引擎资源处理工具的完整指南
  • C#怎么实现图片添加水印 C#如何用代码在图片上添加文字水印和Logo图片水印【图像】
  • 【从零到一】HTML表单<form>与<input>核心用法完全指南
  • 从STC12到STC8H:手把手教你用串口调试助手读取单片机唯一ID(附完整C51代码)
  • 收藏|2026年版 Java 程序员转型 AI 大模型开发,职业跃迁全攻略