当某个属性具有某个值时,我想为该行着色。之前已经问过这个问题,并且在这里有一个有效的解决方案 How to color row on specific value in angular-ui-grid?
我正在设置正面颜色(颜色:#FF0000),而不是背景颜色。
在添加选择模块之前,这样可以正常工作。使用此模块,您在此行的开头有一个额外的复选框。检查时,行的背景颜色会改变(而不是正面颜色!)。所有这些都会添加一个额外的类,它在网格的css中声明:
.ui-grid-row.ui-grid-row-selected > [ui-grid-row] > .ui-grid-cell {
background-color: #c9dde1;
}
选中该复选框后,该类将添加到元素中。
我的代码类似于链接答案中的代码:
rowTemplate: '<div ng-class="{\'targetRow\': row.entity.target }"><div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ui-grid-cell></div></div>',
.targetRow {
color: #FF0000;
}
添加此选项后,选择行时背景颜色不再更改。在Chrome的调试工具中,我可以看到该类仍在正确添加且没有其他差异,但color
仍以某种方式覆盖background-color
为什么会发生这种情况,我该如何解决这个问题?
这是一个Plunker: http://plnkr.co/edit/U1rmT48kSjK5gVH0Fv43?p=preview
删除rowTemplate以查看差异。
答案 0 :(得分:2)
问题在于我在将行模板更新为
之后的模板var rowtpl = '<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, \'green\':true, \'blue\':row.entity.count==1 }" ui-grid-cell></div>';
网格开始工作