您的位置：首页 > 产品设计 > UI/UE

[转]UI-Grid HeaderCellClass

2018-01-24 10:41 337 查看

本文转自：http://blog.csdn.net/vesong87/article/details/69230476

原文： 115 HeaderCellClass

在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;
});
}]);

Demo

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航