Question

对于我的UI网格，我已经在$ scope.gridOptions对象中使用以下行模板创建了条件格式：

rowTemplate: '<div ng-class="{\'recruiter-row-active\':row.entity.activePositions!=0, ' +
    '\'recruiter-row-passive\':(row.entity.activePositions==0 && row.entity.passivePositions !=0),' +
    '\'recruiter-row-free\':(row.entity.activePositions==0 && row.entity.passivePositions==0)}">' +
    '<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>'

这些类如下：

.ui-grid-row .recruiter-row-active {
  background-color: #ff816b !important;
}
.ui-grid-row .recruiter-row-passive {
  background-color: #fcff9d !important;
}
.ui-grid-row .recruiter-row-free {
  background-color: #70cc79 !important;
}

所讨论的html行的类为“ ui-grid-row”和“ ng-scope”，父元素的类为“ ui-grid-canvas”

当我还实现了

时，我能够使用条件格式

.ui-grid-row .ui-grid-cell {
  background-color: inherit !important;
}

但是我不想影响我的网络应用程序中的其他网格。

如何获取条件行格式以覆盖默认值？

Answer 1

您可以使用scss并将网格包装为：

<div view="my-colors">
    <!-- your grid element goes here -->
</div>

在scss文件中，将您要影响的样式仅包装为：

[view="my-colors"] {
    .ui-grid-row .ui-grid-cell {
      background-color: inherit !important;
    }
}

Angular UI Grid：条件行格式不会覆盖默认的交替颜色

1 个答案: