Layui表格怎么实现根据数值正负显示红绿不同的颜色

大磊酱_4341

大磊酱_4341

2026-04-30

414人浏览

原创

Layui表格数值颜色渲染需用templet或cellStyle:templet手动拼HTML(注意字段名、return和零值),cellStyle(2.8+)更轻量但仅控制样式;reload时须显式传cols防丢失,同时注意字符串转数字、负数括号及兼容性。

表格列中用 templet 渲染带颜色的数值

layui 的 table.render() 不支持直接给单元格设 css 类名依赖数值,得靠 templet 手动控制输出 html。核心是把原始值包裹进带样式的 <span></span>,根据正负动态加类或内联样式。

常见错误是直接在 templet 里写 if (d.price > 0) {...} 却忘了 d 是当前行数据对象,字段名要和 cols 中定义的 field 一致;另外别漏掉 return,否则渲染为空。

  • 推荐用内联样式,避免额外定义 CSS 类: templet: function(d){ return d.amount >= 0 ? '<span style="color:#52c418">' + d.amount + '</span>' : '<span style="color:#f5222d">' + d.amount + '</span>'; }
  • 如果要用 class,确保全局 CSS 已加载: <span class="num-positive"></span> 和 <span class="num-negative"></span>,并在页面中补充 .num-positive{color:#52c418} .num-negative{color:#f5222d}
  • 注意零值处理:按业务需要决定 0 算正还是中性,别让 0 被归到负色里

用 cellStyle 实现更干净的颜色控制(Layui 2.8+)

新版 Layui 支持列级 cellStyle 回调函数,比 templet 更轻量——它只负责返回样式对象,不干扰内容渲染,适合纯样式需求。

容易踩的坑是误以为 cellStyle 能改内容,其实它只影响 style 属性;而且这个配置必须写在具体列定义里,不能放在顶层 table.render() 配置中。

  • 写法示例:{ field: 'profit', title: '利润', cellStyle: function(row, col, value){ return value >= 0 ? { color: '#52c418' } : { color: '#f5222d' }; } }
  • 兼容性注意:低于 2.8 的 Layui 没这个 API,强行使用会静默失效,建议先查 layui.version
  • 性能友好:相比 templet,cellStyle 不触发 DOM 重建,适合大数据量表格

负数括号显示 + 颜色同步(如 “(123)” 红色)

财务场景常要求负数加括号且变红,这时 templet 更灵活,cellStyle 只管颜色,不管内容格式。

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

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

下载

关键点在于字符串拼接时别丢原始符号逻辑——别用 Math.abs() 后再手动加括号却不判断原值,否则 -0 或科学计数会出错。

  • 安全写法:templet: function(d){ var v = d.balance; return v >= 0 ? '<span style="color:#52c418">' + v + '</span>' : '<span style="color:#f5222d">(' + Math.abs(v) + ')</span>'; }
  • 避免用 v.toString().startsWith('-') 判断负号,因为 -0 返回 "-0" 但 -0 >= 0 为 true,语义更稳
  • 如果后端返回的是字符串(如 "-123.45"),先 parseFloat() 再比较,否则 "-5" > 0 是 true(字符串比较)

表格重载后颜色丢失?检查 reload 是否覆盖了列配置

调用 table.reload() 时若只传 where 或 page,原有列定义里的 templet 或 cellStyle 不会被继承,导致颜色消失。

本质是 reload 默认只合并部分参数,列配置(cols)不属于自动合并项。

  • 正确做法:重载时显式传入完整列配置,或从原实例取 config.cols 复用:table.reload('id', { cols: tableIns.config.cols, where: {...} });
  • 更省事:把列定义抽成变量,reload 时直接引用,避免硬编码重复
  • 调试技巧:在 done 回调里打印 tableIns.config.cols[0],确认 templet 还在不在
颜色逻辑本身简单,真正容易被忽略的是 reload 行为对列配置的破坏,以及零值、字符串输入、旧版兼容这三处边界。

相关文章

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

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

下载

相关标签:

layui

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

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2443

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

5263

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6310

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

5878

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

843

5

html5动画制作有哪些制作方法
html5动画制作有哪些制作方法

html5动画制作方法有使用CSS3动画、使用JavaScript动画库、使用HTML5 Canvas等。想了解更多html5动画制作方法相关内容,可以阅读本专题下面的文章。

2023.10.23

4011

6

HTML与HTML5的区别
HTML与HTML5的区别

HTML与HTML5的区别:1、html5支持矢量图形,html本身不支持;2、html5中可临时存储数据,html不行;3、html5新增了许多控件;4、html本身不支持音频和视频,html5支持;5、html无法处理不准确的语法,html5能够处理等等。想了解更多HTML与HTML5的相关内容,可以阅读本专题下面的文章。

2024.03.06

6888

6

html5从入门到精通汇总
html5从入门到精通汇总

想系统掌握HTML5开发?本合集精选全网优质学习资源,涵盖免费教程、实战项目、视频课程与权威电子书,从基础语法到高级特性(Canvas、本地存储、响应式布局等)一应俱全,适合零基础小白到进阶开发者,助你高效入门并精通HTML5前端开发。

2025.12.30

814

19

html5新老标签汇总
html5新老标签汇总

HTML5在2026年持续优化网页语义化与交互体验,不仅引入了如<header>、<nav>、<article>、<section>、<aside>、<footer>等结构化标签,还新增了<video>、<audio>、<canvas>、<figure>、<time>、<mark>等增强多媒体与

2025.12.30

694

12

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 12.8万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 11万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习