angular-ui-grid中所选行的自定义颜色

Question

我想改变角度-ui网格的单元格/行颜色.从文档中我似乎应该使用cellClass.我想要两种颜色用于条纹外观,另一种颜色用于当前选定的行.

在我的columnDefs中,我使用一个函数来确定正确的cellClass.这在首次加载时非常有效.

$scope.getCellClass = function (grid, row, col, rowRenderIndex, colRenderIndex) {
    if (row.isSelected)
        return 'my-grid-cell-selected';

    if ((rowRenderIndex % 2) == 0) {
        return 'my-grid-cell1';
    }
    else {
        return 'my-grid-cell2';
    }
}

$scope.gridOptions = {
    enableRowSelection: true,
    enableRowHeaderSelection: false,        
    multiSelect: false,
    columnDefs: [
      { field: 'EventDate', cellClass: $scope.getCellClass },
      ...
    ]
};

但是,我不知道如何更新所选行的所有单元格的cellClass.我有以下代码,我认为会更新所选行,但没有任何反应,虽然我可以看到它被调用.

$scope.gridOptions.onRegisterApi = function (gridApi) {
    $scope.gridApi = gridApi;

    gridApi.selection.on.rowSelectionChanged($scope, function(row){
        //??????
        gridApi.core.notifyDataChange(uiGridConstants.dataChange.ROW);
    });

};

如果没有我的cellClasses,所选行的颜色会有所不同.

知道如何为所选行实现自定义颜色吗？

Answer 1

以下是使用CSS的方法:

.ui-grid-row-selected.ui-grid-row:nth-child(odd) .ui-grid-cell,
.ui-grid-row-selected.ui-grid-row:nth-child(even) .ui-grid-cell {
  color: #fff;
  background-color: blue;
} 

.ui-grid-row-selected.ui-grid-row:nth-child(odd) .ui-grid-cell.ui-grid-cell-focus,
.ui-grid-row-selected.ui-grid-row:nth-child(even) .ui-grid-cell.ui-grid-cell-focus {
  outline: 0;
  background-color: blue;
} 

.ui-grid-row-selected.ui-grid-row:nth-child(odd):hover .ui-grid-cell,
.ui-grid-row-selected.ui-grid-row:nth-child(even):hover .ui-grid-cell {
  color: #fff;
  background-color: blue;
}