如何自定义angular ui-网格行背景色？

Question

我正在尝试根据条件更改 angular 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 类。

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

样本：http://plnkr.co/edit/Xie68a3sT9CXTdCuI3tq?p=preview

如何自定义angular ui-网格行背景色？

How to customize angular ui-grid row background color?

javascript

css

angularjs

angular-ui-grid