Question

我需要根据某些条件更改角度ui网格的行颜色。目标是在ng-grid中实现的，如图所示

 rowTemplate: '<div style="height: 100%" ng-class="{red: row.getProperty(\'viewed\') < 1}"><div ng-style="{ \'cursor\': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell ">' +
             '<div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }"> </div>' +
            '<div ng-cell></div>' +
            '</div></div>',

如何在角度ui网格中实现相同

Answer 1

我没有看到＆＃34;查看＆＃34;作为行的属性，根据ui-grid api：http://ui-grid.info/docs/#/api/ui.grid.class:GridRow。但是，如果你想评估对象中的属性（假设你的数据是一个对象数组），它看起来就像这样。

您需要在css中覆盖默认行着色

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

你的风格：

.my-style-1 {
  background-color: #ff0000 !important;
}
.my-style-2 {
  background-color: #ffffff !important;
}
.my-style-3 {
  background-color: #0000ff !important;
}

rowTemplate：

rowTemplate: '<div ng-class="{\'my-style-1\':row.entity.Field1===1,  \'my-style-2\':row.entity.Field1===2,  \'my-style-2\':row.entity.Field1===3}" <div ng-repeat="col in colContainer.renderedColumns track by col.colDef.name"  class="ui-grid-cell" ui-grid-cell></div></div>'

//example data
data:[{'Field1': 1, 'Field2': 'abc', 'Field3': 'def'},
        {'Field1': 2, 'Field2': 'hij', 'Field3': 'klm'},
        {'Field1': 3, 'Field2': 'nop', 'Field3': 'qrs'}];

Answer 2

我认为在ng-grid和ui-grid中，你可以使用

cellTemplate: '<div style="height: 100%" ng-class="{red: row.getProperty(\'viewed\') < 1}"><div ng-style="{\'cursor\': row.cursor}" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell ">' +
         '<div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ngVerticalBarVisible: !$last}"> </div>' +
        '<div ng-cell></div>' +
        '</div></div>'，

Answer 3

您可以使用cellTemplate代替cellClass在其他anwser中提及：

cellClass: function (grid, row) {
  return row.entity.age < 18 ? 'young' : 'old';
};

Answer 4

对于我的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;
}

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

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

角度ui网格行模板颜色基于条件

4 个答案: