行颜色基于Angular UI-Grid中的数据属性

Question

我正在开发Angular UI-Grid。我有一个场景，我需要使用数据值更改网格单元格的颜色。

在上面的网格中，着色的行是基于数据列完成的。我在网格中得到一个列为BG_COLOR我需要根据它更改行的颜色。

Answer 1

我认为你想要的字段是cellClass。还有一个问题显示了在这里使用它的一种方法。

look here

您还可以尝试使用cellTemplate设置自己的模板，以了解如何渲染单元格。

Answer 2

您可以像这样使用行模板：

function rowTemplate() {
    return '<div ng-class="{\'ui-grid-row-bg-red\':row.entity.isError" >' +
                 '<div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader}"  ui-grid-cell></div>' +
           '</div>';
    }

然后在css中定义ui-grid-row-bg-red：

.gridStyle .ui-grid-row-bg-red .ui-grid-cell {
    background-color: #872f2f;
    color: #fff;
 }