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

Question

我想要更改angular-ui-grid的单元格/行颜色。从文档中看，我似乎应该使用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

在我看来，最好也是最简单的方法是使用提供的ui-grid customizer！

具体来说，要更改奇数行与偶数行的背景色，需要更改@rowcoloreven和@rowcolorodd字段。

要更改当前选定行的颜色，请在定制器中更新@focusedcell属性，此外，遵循this tutorial和/或查看this plunker中的第二个控制器，以将选择范围从单个单元格扩展到整行。

我还创建了一个新的plunker，它展示了如何实现行选择以及如何更改行颜色默认值。是的，我知道它真的是花哨的颜色--我认为它会帮助你真正理解这一点:)。您可以在custom.css中看到与未定制的ui-grid css的实际不同之处

.ui-grid-row:nth-child(odd) .ui-grid-cell {
  background-color: #ffff33;
}
.ui-grid-row:nth-child(even) .ui-grid-cell {
  background-color: #ff22ff;
} 



.ui-grid-cell-focus {
  outline: 0;
  background-color: #b3c4c7;
}

如果您需要更多指导，请让我知道:)

Answer 2

下面是使用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;
}