easyui的datagrid改变单元格颜色

最新推荐文章于 2022-04-30 15:08:11 发布

weixin_30767835

最新推荐文章于 2022-04-30 15:08:11 发布

阅读量458

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/raitorei/p/9989649.html

本文介绍如何使用EasyUI的datagrid组件自定义不同条件下的行背景颜色，通过JavaScript实现对特定字段值的判断，进而改变对应单元格的颜色，以增强数据的直观展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

另一种方法：https://www.cnblogs.com/raitorei/p/10395233.html

easyui的datagrid改变整行颜色：https://www.cnblogs.com/raitorei/p/10641342.html

代码：

function centerList(){
    $('#centerList').datagrid({
        width:'100%',
        iconCls : 'icon-ok',
          pageSize : 1,//默认选择的分页是每页5行数据
          pageList : [ 15,50,100,150 ],//可以选择的分页集合
          nowrap : true,//设置为true，当数据长度超出列宽时将会自动截取
          striped : false,//设置为true将交替显示行背景。
          collapsible : true,//显示可折叠按钮
          url:'report/getAlarmDetailsData.action',//url调用Action方法
          loadMsg : '数据装载中......',
          singleSelect:true,//为true时只能选择单行
          fitColumns:true,//允许表格自动缩放，以适应父容器
          //sortName : 'xh',//当数据表格初始化时以哪一列来排序
          //sortOrder : 'desc',//定义排序顺序，可以是'asc'或者'desc'（正序或者倒序）。
          remoteSort : false, 
          pagination : false,//分页
          rownumbers : true,//行数
          queryParams:{'flag':3},
          onLoadSuccess:function(data){
              var trs = $(this).prev().find('div.datagrid-body').find('tr');
              //行
              for(var i=0;i<trs.length;i++){
                  //行内单元格
                  for(var j=1;j<trs[i].cells.length;j++){
                      var row_html = trs[i].cells[j];
                      var cell_field=$(row_html).attr('field');
                      var cell_value=$(row_html).find('div').html();
                      if(cell_value == 0){
                          trs[i].cells[j].style.cssText='background:#59DB8F;';
                      }
                      if(cell_field == 'alarm1' && cell_value > 0){
                          trs[i].cells[j].style.cssText='background:#FFF68F;';
                      }
                      if(cell_field == 'alarm2' && cell_value > 0){
                          trs[i].cells[j].style.cssText='background:#FFC859;';
                      }
                      if(cell_field == 'alarm3' && cell_value > 0){
                          trs[i].cells[j].style.cssText='background:#FFA059;';
                      }
                      if(cell_field == 'alarm4' && cell_value > 0){
                          trs[i].cells[j].style.cssText='background:#FF6347;';
                      }
                  }
              }
          }
    });
}