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

【问题标题】：Row Color based on data property in Angular UI-Grid基于 Angular UI-Grid 中的数据属性的行颜色
【发布时间】：2015-05-21 08:46:46
【问题描述】：

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

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

【问题讨论】：

标签： angularjs angular-ui-grid

【解决方案1】：

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

look here

您也可以尝试使用 cellTemplate 来设置您自己的模板来呈现单元格。

【讨论】：

【解决方案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;
 }

【讨论】：