如何自定义角度 ui-grid 行背景颜色？

Question

我正在尝试根据条件更改有角 ui-grid 行的背景颜色，因此如果 riskValue 为 1，则尝试使其变为红色，如果值为 2，则行背景颜色应为黄色。有什么简单的方法可以完成这项任务吗？

config.js

"columnDefs": [{
        "name": "Ticket Number",
        "field": "ticketNum",
        "width": 120
    },
    {
        "name": "Asset Id ",
        "field": "assetID",
        "width": 100
    },
    {
        "name": "Severity",
        "field": "severity",
        "width": 100
    },
    {
        "name": "Risk Index",
        "field": "riskIndex",
        "width": 100
    },
    {
        "name": "Risk Val",
        "field": "riskValue",
        "cellTemplate": "<div ng-if=\"row.entity.Comments_Col1 != 'none'\" title={{row.entity.riskValue}} \" ><div style='white-space:nowrap;border-bottom: 1px solid red !important; height:100%;width:100%;'>{{row.entity.riskValue}}</div></div>",
        "sort": {
            "direction": "aesc",
            "priority": 0
        },
        "width": 100,
        "visible": false
    }
],

Answer 1

你可以使用gridOptions.cellClass

cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
    if (row.entity.riskValue === 1) 
        return 'red';
    if (row.entity.riskValue === 2)
        return 'yellow';
}

其中red 和yellow 是css 类。

此方法需要将函数添加到您的所有 columnDefs 但只允许选择一些应该更改背景颜色的列。

示例：http://plnkr.co/edit/Xie68a3sT9CXTdCuI3tq?p=preview