本文转自：http://blog.csdn.net/vesong87/article/details/69230476
在columnDef中可以为每个列表头 设置一个class名称或者通过function返回的一个class名称。
在下面例子中，我们可以设置第一列的字体颜色为蓝色，第二列当排序条件为ASC时字体颜色和背景色改变。
代码：
index.html
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="/release/ui-grid.js"></script>
<script src="/release/ui-grid.css"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
<br>
<br>
<div id="grid1" ui-grid="gridOptions" class="grid"></div>
</div>
</body>
</html>main.css
.grid {
500px;
height: 200px;
}
.red { color: red; background-color: yellow !important; }
.blue { color: blue; }app.js
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {
$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{ field: 'name', headerCellClass: 'blue' },
{ field: 'company',
headerCellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
if (col.sort.direction === uiGridConstants.ASC) {
return 'red';
}
}
}
],
onRegisterApi: function( gridApi ) {
$scope.gridApi = gridApi;
$scope.gridApi.core.on.sortChanged( $scope, function( grid, sort ) {
$scope.gridApi.core.notifyDataChange( uiGridConstants.dataChange.COLUMN );
})
}
};
$http.get('/data/100.json')
.success(function(data) {
$scope.gridOptions.data = data;
});
}]);Demo
