यूआई-जीआरआईडी हेडर - रंग बदलें और टेक्स्ट

Question

मैं कोणीय यूई-ग्रिड हेडर के रंग और पाठ को बदलना चाहता हूं।

मैं चाहता हूं कि हेडर की पृष्ठभूमि काला हो और पाठ सफेद हो।

मैं ढाल या छायांकन नहीं चाहता हूं। मैं बस इसे काला चाहता हूँ।

मुझे कौन सी सीएसएस जोड़ने की ज़रूरत है?

Answer 1

यह बहुत आसान है। बस अपने सीएसएस के साथ प्रत्येक कॉलम के लिए हेडरसेल क्लास जोड़ें।

$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

मैं जानता हूँ कि यह पहले से ही उत्तर है। लेकिन इस सीएसएस नियम बनाने columDefs की आवश्यकता के बिना एक ही काम करता है:

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

Plunker

Answer 3

आप बदलना सभी ui-grid header की पृष्ठभूमि का रंग अपने सीएसएस फ़ाइल में निम्न का उपयोग की जरूरत है।

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

अन्यथा, यदि आप, विशिष्ट ui-grid headers की पृष्ठभूमि का रंग बदलने की जरूरत है तो headerCellClass विशेषता का उपयोग।