UI-GRID header - 更改颜色和文本

Question

我想更改angularui-gridheader的颜色和文字。

我希望 header 的背景为黑色，文本为白色。

我不想要渐变或阴影。我只想要黑色。

我需要添加什么CSS？

Answer 1

这很简单。只需使用 css.

为每一列添加一个 headerCellClass

 $scope.gridOptions = {
    enableSorting: true,
    columnDefs: [
      { field: 'name', headerCellClass: 'white' },
      { field: 'company',headerCellClass:'white'}
    ],
    onRegisterApi: function( gridApi ) {
      $scope.gridApi = gridApi;
      $scope.gridApi.core.on.sortChanged( $scope, function( grid, sort ) {
        $scope.gridApi.core.notifyDataChange( uiGridConstants.dataChange.COLUMN );
      })
    }
  };

这是一个示例

http://plnkr.co/edit/DKi9nSMbI3PG1u8lcHDE?p=preview

Answer 2

我知道这已经回答了。但是这个 css 规则不需要创建 columDefs:

.ui-grid-top-panel {
    background: black;
    color: white;
}

Plunker

Answer 3

如果您需要更改所有 ui-grid header 的背景颜色，请在您的 CSS 文件中使用以下内容。

.ui-grid-header-canvas{
    background-color: black;
}
.ui-grid-top-panel{
    color: white;
}

否则，如果您需要更改特定 ui-grid headers 的背景颜色，则使用 headerCellClass 属性。

UI-GRID header - 更改颜色和文本

UI-GRID header - Change Color And Text

angular-ui-grid