[转]UI-Grid HeaderCellClass-优快云博客

本文转自：http://blog.youkuaiyun.com/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 {
  width: 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; }); }]);