EasyUI datagrid 动态修改行背景色或单元格背景

原创于 2019-07-01 22:09:13 发布 · 5k 阅读

2 ·

CC 4.0 BY-SA版权

本文详细介绍如何使用EasyUI框架中的Datagrid组件自定义行和单元格的背景颜色，通过JavaScript代码实现不同状态下的视觉区分，提升数据展示的清晰度。

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

修改行背景色

$('#dg').datagrid({  
    rowStyler: function(index,row) {
        	if (row.id == -1) {
        		return ""
        	}
        	
        	if (row.status == '2') {
                return 'background-color:#E2EFD9;';
            } 
   
         	return 'background-color:#FFF2CC;';
            
        }
});

修改单元格背景色

{
               field:'status',
               title:'状态',
               halign:'center',
               align:'center',
               width:80,
               editor:{
                   type:'combobox',
                   options: {
                       data: jobStatus,
                       valueField: "value",
                       textField: "text",
                       editable: false,
                       panelHeight:'auto'
                   }
                       
               },
               formatter:function(value, row){
                   if (Util.isEmpty(value)) {
                       return "";
                   } else {
                       for (var i = 0; i < jobStatus.length; i++) { 
                           if (jobStatus[i].value == value) {
                               return jobStatus[i].text;
                           }
                       }
                   }
               },
               styler: function(value,row,index){
                   if (value=='2') {
                       return 'background-color:#E2EFD9;';
                   } 
                   if (value=='1') {
                	   return 'background-color:#FFF2CC;';
                   }
                   return "";
               }
          }