news 2026/4/16 11:54:06

jQuery EasyUI 数据网格 - 条件设置行背景颜色

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
jQuery EasyUI 数据网格 - 条件设置行背景颜色

下面直接给你最实用、最常见的根据条件设置行背景颜色(row styling)方法,jQuery EasyUI datagrid 支持超级灵活,复制粘贴就能用,领导最爱的“金额超标红色、状态异常高亮、库存不足橙色预警”全都有!

方法1:最简单最常用 - 使用 rowStyler 函数(推荐现在就用这个,3秒出效果)
根据行数据动态返回样式,超级高效!

<tableid="dg"class="easyui-datagrid"title="条件行背景颜色示例"style="width:800px;height:400px"data-options="url:'data.json', fitColumns:true, pagination:true, rownumbers:true, singleSelect:false, showFooter:true, rowStyler: function(index, row){ // 根据条件返回CSS样式字符串 if (row.amount > 10000){ return'background-color:#ffcccc;color:#ff0000;font-weight:bold;'; // 金额超1万 红色 } if (row.quantity < 10){ return'background-color:#fff3cd;color:#856404;'; // 库存不足10 橙色预警 } if (row.status =='禁用'){ return'background-color:#f8f9fa;color:#6c757d;text-decoration:line-through;'; // 禁用 灰色删除线 } if (row.vip == true){ return'background-color:#d4edda;color:#155724;border-left:4px solid #28a745;'; // VIP客户 绿色边 } return''; // 默认无样式 }"><thead><tr><thdata-options="field:'ck',checkbox:true"></th><thdata-options="field:'id',width:60">ID</th><thdata-options="field:'name',width:120">商品名称</th><thdata-options="field:'quantity',width:80,align:'right'">库存数量</th><thdata-options="field:'amount',width:120,align:'right'">订单金额</th><thdata-options="field:'status',width:80">状态</th><thdata-options="field:'vip',width:60,formatter:function(v){return v?'':'';}">VIP</th></tr></thead></table>

效果:

  • 订单金额 > 10000:整行红色高亮
  • 库存 < 10:橙色背景预警
  • 状态“禁用”:灰色 + 删除线
  • VIP客户:绿色左边框 + 浅绿背景
    实时加载、分页、排序全支持!

方法2:更高级 - 结合 styler 函数动态设置(支持列单独颜色)
如果你想某列单独高亮,用 column 的 styler:

<th data-options=" field:'amount',width:120,align:'right',styler:function(value,row,index){if(value>10000){return'background-color:#ffebee;color:#c62828;font-weight:bold;';}return'';}">订单金额</th>

方法3:加载后手动设置行样式(适合复杂条件或异步判断)

$('#dg').datagrid({onLoadSuccess:function(data){varrows=data.rows;for(vari=0;i<rows.length;i++){varrow=rows[i];varcss='';if(row.amount>50000){css='background-color:#ffebee !important;';}elseif(row.quantity==0){css='background-color:#f8d7da;color:#721c24;';}if(css){// 手动给行tr添加样式(注意索引从0开始)$(this).datagrid('getRowDetail',i).prev('tr.datagrid-row').attr('style',css);// 或者更稳的方式:$('tr[datagrid-row-index='+i+']').css('background-color','#ffebee');}}}});

方法4:选中行也保持条件颜色(避免选中蓝色覆盖)
在 rowStyler 里加 !important 或更高优先级:

rowStyler:function(index,row){if(row.amount>10000){return'background-color:#ffcccc !important;color:#ff0000 !important;';}// ...}

你现在直接复制方法1rowStyler代码到你的 datagrid,刷新一下就能看到根据条件自动变色的行效果了!
结合之前的复选框 + 分页 + 行内编辑 + 页脚摘要 + 合并单元格,你的报表已经可以直接发给领导说“这是高级BI系统”了。

想要我给你一个完整的HTML示例(带远程数据 + 多条件颜色 + 库存预警 + VIP标识 + 选中保持颜色)?
或者你告诉我你的具体条件(比如“余额负数红色”“到期日期接近黄色”“优先级高加粗”),我2分钟发你精准代码,复制就能跑!

快说说你想根据什么字段/条件变色,我手把手帮你搞定,5分钟内看到超级专业的行颜色效果!

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/16 11:08:56

Nexe终极指南:一键打包Node.js应用为独立可执行文件

Nexe终极指南&#xff1a;一键打包Node.js应用为独立可执行文件 【免费下载链接】nexe &#x1f389; create a single executable out of your node.js apps 项目地址: https://gitcode.com/gh_mirrors/ne/nexe 在当今快节奏的开发环境中&#xff0c;Node.js开发者常常…

作者头像 李华
网站建设 2026/4/15 20:09:00

SVNAdmin2 Web管理系统:企业级SVN权限管理的革新方案

SVNAdmin2 Web管理系统&#xff1a;企业级SVN权限管理的革新方案 【免费下载链接】SvnAdminV2.0 基于web的SVN管理系统&#xff0c;支持HTTP协议、SVN协议、支持LDAP认证、Docker部署 项目地址: https://gitcode.com/gh_mirrors/sv/SvnAdminV2.0 在当今快速发展的软件开…

作者头像 李华
网站建设 2026/4/11 22:07:34

IQ-TREE2系统发育分析终极指南:从入门到精通

IQ-TREE2是一款基于最大似然法的开源系统发育分析软件&#xff0c;专门为处理大规模基因组数据而优化设计。它能够快速构建物种进化树&#xff0c;支持多核并行计算和自动检查点恢复功能&#xff0c;帮助科研人员轻松重建物种间的进化关系。无论你是初学者还是经验丰富的研究者…

作者头像 李华
网站建设 2026/4/16 11:00:10

比手动编写快10倍!GROUP BY HAVING代码生成技巧

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 构建一个GROUP BY HAVING效率对比工具&#xff1a;1.左侧传统手动编写界面 2.右侧AI辅助生成界面 3.计时功能对比两者耗时 4.错误率统计 5.执行效率分析。要求记录用户操作过程&…

作者头像 李华
网站建设 2026/4/15 19:19:27

Jupyter AI完整配置指南:如何快速搭建智能编程环境

Jupyter AI完整配置指南&#xff1a;如何快速搭建智能编程环境 【免费下载链接】jupyter-ai A generative AI extension for JupyterLab 项目地址: https://gitcode.com/gh_mirrors/ju/jupyter-ai 还在为复杂的代码调试而苦恼吗&#xff1f;是否曾花费数小时查阅文档却依…

作者头像 李华