[转]UI-Grid HeaderCellClass

本文转自：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

[转]UI-Grid HeaderCellClass相关推荐

在ASP.NET MVC 4中使用Kendo UI Grid
Kendo UI 是Telerik推出的一套based on jQuery 的 Framework,提供了很多控件(Menu .Grid .Combox等...), 底层以Html5 + jQuery ...
kendo ui grid选中行事件，获取combobox选择的值
背景: 以前用 telerik ui做的grid现在又要换成kendo ui,不过说句实话kendo ui真的比telerik好多,可以说超级升级改头换面.当然用的mvc的辅助方法,以前的teleri ...
Kendo UI Grid 用法详细整理
目录一. kendo UI grid结构结构实例二. kendo UI grid常用属性 1.new kendo.data.DataSource()中常见属性: 2.$("#grid& ...
Kendo UI Grid 样式改变控制
目录一. 单元格颜色控制 1. 改变单元格背景颜色 2. 改变单元格边框 3. 改变行背景色二. 单元格内容控制 1. 单元格换行控制 a. css控制不换行 b. JS控制指定换行 2. 表格以 ...
kendoui固定宽度_Web开发：看如何定义Kendo UI Grid Width
Width 默认情况下,Grid没有设置宽度,其操作类似于块级元素,并扩展为100%的宽度(父元素的宽度). 入门指南要控制Grid的宽度,请将CSS width属性设置为Grid本身或其某些父类, ...
Kendo Web UI Grid数据绑定，删除，编辑，并把默认英文改成中文
Kendo Web UI 是个不错的Jquery框.可惜老外写的,很多都是默认的英文,当然我们也可以设置成中文,接下来,我们就看看Grid是如何实现的数据绑定(Kendo Grid数据绑定实现有很多方 ...
kendo ui 动态隐藏列_Kendo UI使用教程：Kendo UI Grid中的动态数据（一）
本教程将为大家介绍如何逐步创建具有动态数据的Kendo UI grids.当您在一遍又一遍输入相同代码时,可以知道有些是可以关闭的,您输入的代码正在获取WET.创建具有动态数据的可编辑Kendo UI ...
Kendo Web UI Grid里时间格式转换
我和大家分享一下我的kendo的学习心得.如果不好的地方多多包含或者给我留言请看图 kendo里时间格式如图Oder Date列里的格式.但是我们想把时间转换成中国人习惯的格式.如Shipped Da ...
angularjs之UI Grid 的刷新本地数据源及HTTP数据源
关键代码: 如果数据源是本地数据 $("#hidJsonData").val("[]"); var myJsonData = []; if ($(& ...
Kendo UI grid 表格数据更新
1.整行数据更新 //获取grid表格var table0 = $(updateTableID).data("kendoGrid");//删除第一条 var lastTableDa ...

[转]UI-Grid HeaderCellClass

[转]UI-Grid HeaderCellClass相关推荐

最新文章

热门文章