如何根据严重性更改数据网格中的行颜色？

Posted 2023-02-26

【中文标题】如何根据严重性更改数据网格中的行颜色？

【英文标题】：How can I change the row colour in datagrid based on severity?

【发布时间】：2011-02-15 06:31:33

【问题描述】：

如何根据严重性条件更改数据网格中的行颜色？我是这个 EXTJS 主题的新手。我曾经阅读器读取，存储到存储和写入器写入数据。将所有数据提取到网格后，如何根据严重性条件更改数据网格中的行颜色？你能解释一下我的代码工作吗？

【参考方案1】：

您可以使用 GridView 类 (Ext.grid.GridView) 来操作网格的用户界面。您还可以使用 GridPanel 的 viewConfig 属性。这是一个例子：

viewConfig: 
        //Return CSS class to apply to rows depending upon data values
        getRowClass: function(record, index) 
            var c = record.get('change');
            if (c < 0) 
                return 'price-fall';
             else if (c > 0) 
                return 'price-rise';
            
        
    

ps：示例取自 ExtJS API 文档本身

价格下跌和价格上涨是相应设置背景颜色的 CSS。例如：

.price-fall  
 background-color: #color;


.price-rise 
 background-color: #color;

上面代码中的

'change'是索引值？？？？函数中的记录和索引到底是什么意思？

@Abdel Olakara：记录是什么意思？我希望它申请尽可能多的行。我怎样才能使它成为一个循环？

@master123，你看过 API 文档了吗？ getRowClass() 有四个参数： getRowClass( Record record, Number index, Object rowParams, Store store ) - 第一个是存储中的 Record 对象，index 是您的行号，rowParams 是该行的参数，最后一个是存储本身。

如何使它适用于网格中的所有行？是否需要循环，如何？

不需要循环。渲染网格时，extjs 将为每条记录调用 getRowClass()。您是否有任何变量来定义要使用的背景颜色？说如果价格低于它的红色，否则它的绿色。所以你可以使用上面代码所示的 if 语句进行比较。

【参考方案2】：

您可以使用GridView 的getRowClass 方法来做到这一点（参见Ext JS API）。

API 文档中引用的示例：

viewConfig: 
    forceFit: true,
    showPreview: true, // custom property
    enableRowBody: true, // required to create a second, full-width row to show expanded Record data
    getRowClass: function(record, rowIndex, rp, ds) // rp = rowParams
        if(this.showPreview)
            rp.body = '<p>'+record.data.excerpt+'</p>';
            return 'x-grid3-row-expanded';
        
        return 'x-grid3-row-collapsed';
    
,

【参考方案3】：

您可以从列模型中为您的列使用渲染器，然后像这样分配一个 css 类：

所以，customRenderer 函数：

`

function customRenderer(value, metaData, record, rowIndex, colIndex, store) 
    var opValue = value;
    if (value === "Rejected") 
        metaData.css = 'redUnderlinedText';
     else if (value === "Completed") 
        metaData.css = 'greenUnderlinedText';
     else if (value === "Started") 
        metaData.css = 'blueUnderlinedText';
    
    return opValue;

`

然后是你的专栏：

        
            header: 'Your Column Header',
            dataIndex: 'your_data_index',
            renderer: customRenderer
        

那么你的css可能是这样的：

.redUnderlinedText 
    background-color: blue,
    color: red;
    text-decoration: underline;
    cursor: pointer;

【讨论】：

谢谢你。但我不熟悉上面的代码？渲染器是做什么的？锄头可以用来改变行的背景颜色吗？

@lucian：我理解并理解了上面代码的概念。它适用于更改行背景颜色吗？我是否需要创建一个单独的 CSS 来更改不同的行颜色？

参数记录是什么意思？如何指定行索引和列索引？

记录参数代表网格中的一整行。该方法的概念如下：该函数将在渲染时为存储中的每条记录调用。因此，如果您有 5 行，该函数将使用相应的参数调用 5 次。您不必专门设置 rowIndex 和 columnIndex 变量，它们将被填充相应的值。

这使我们可以根据当前记录中的一些信息分别为每一行自定义该列。希望我回答了你的问题。