Question

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

Answer 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;
}

Answer 2

您可以使用getRowClass的{{1}}方法来执行此操作（请参阅Ext JS API）。

API文档中的引用示例：

GridView

Answer 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;
}

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

3 个答案: