根据数据更改 cfgrid (html) 单元格颜色

Question

我想根据 cfgrid 中的状态条件更改单元格的颜色。

例如：

1. 如果记录的状态为“逾期”，则单元格将变为红色，并以粗体显示“逾期”。
2. 如果记录的状态为到期（30 天内），则单元格将变为黄色，并以粗体显示到期。
3. 如果记录的状态为“当前”（到期日期超过 30 天），则单元格将为绿色，“当前”以粗体显示。...

我只能找到 cfgridrow 和 cfgridcolumn 的渲染。

Answer 1

您应该求助于 ExtJS 提供的列渲染器属性。列的渲染器获取三个参数，第二个是一个元对象，您可以在其上设置一个名为 attr 的属性，该属性被设置为 cell dom 元素上的属性。您可以为单元格提供一些 css 样式，例如：

var renderer = function(value, meta, record){
    if(value == "Overdue") { meta.attr = 'style="color:red;font-weight:bold"'; }
    if(value == "Due") { meta.attr = 'style="color:yellow;font-weight:bold"'; }
    if(value == "Current") { meta.attr = 'style="color:green"'; }
    return value;
}

检查 Ext.grid.ColumnModel 文档

Answer 2

我使用类似于您需要网格中的列来显示到期日期的东西：

{
 header:    'Expiration Date',    
 dataIndex: 'ExpireDate',
 renderer:  function (value, metaData, record, rowIndex, colIndex, store) {

     if ( record.get ( 'ExpireDate' ) < new Date ( ).clearTime ( ) ) {
       metaData.css += ' y-grid3-expired-cell';
       value = '';    
     }
     if ( record.get ( 'ExpireDate' ).format ('m/d/Y') == '12/31/9999' ) {
       metaData.css += ' y-grid3-non-expired-cell';
       value = '';
     }        
     value = (value == '') ? '' : record.get ('ExpireDate').format ('m/d/Y');
   }      
   return value;    
 }

},

使用CSS类是更强大的解决方案，我的类是这样定义的：

.y-grid3-expired-cell {
  background:         #AA0000;
} 

.y-grid3-non-expired-cell {
 background:         #00AA00;
}

您只需添加自己的逻辑和样式...