Nagłówek UI-GRID - Zmień kolor i tekst

Question

Chcę zmienić kolor i tekst nagłówka ui-grid kątowej.

Chcę, aby tło nagłówka było czarne, a tekst miał być biały.

Nie chcę gradientu ani cieniowania. Chcę tylko, żeby była czarna.

Jakie pliki CSS muszę dodać?

Answer 1

To całkiem proste. Wystarczy dodać nagłówekCellClass dla każdej kolumny za pomocą css.

$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); 
     }) 
    } 
    }; 

Oto próbka

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

Answer 2

wiem, że to jest już odpowiedział. Ale ta reguła css robi tę samą pracę bez konieczności tworzenia columDefs:

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

Plunker

Answer 3

Jeśli trzeba zmienić kolor tła wszystkich ui-grid header użyć następujących w pliku CSS.

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

W przeciwnym razie, jeśli chcesz zmienić kolor tła określonego ui-grid headers, a następnie użyć atrybutu headerCellClass.