本文转自：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的更多相关文章

  1. NGUI UI Grid, two column

    NGUI UI Grid, two column, set Arrangement Horizontal, Column Limit 2.

  2. Kendo Web UI Grid添加一个html控件如（checkbox,button)

    在Kendo Web UI Grid增加一个控件如效果图: <div id="grid1"></div><script> $("#gr ...

  3. kendo ui grid选中行事件，获取combobox选择的值

    背景: 以前用 telerik ui做的grid现在又要换成kendo ui,不过说句实话kendo ui真的比telerik好多,可以说超级升级改头换面.当然用的mvc的辅助方法,以前的teleri ...

  4. Kendo UI Grid 使用总结

    Kendo UI Grid控件的功能强大,这里将常用的一些功能总结一下. Kendo UI Grid 固定列 在使用Gird控件显示数据时,如果数据列过多,会出现横向滚动条,很多情况下,我们希望某些列 ...

  5. Kendo UI Grid 批量编辑使用总结

    项目中使用Kendo UI Grid控件实现批量编辑,现在将用到的功能总结一下. 批量编辑基本设置 Kendo Grid的设置方法如下: $("#grid").kendoGrid( ...

  6. [Asp.net mvc] Asp.net mvc Kendo UI Grid的使用(四)

    有段时间没写博客了,工作状态比较忙,抽空继续总结下Grid的使用,这次主要介绍模板以及其他官网介绍不详尽的使用方法.先Show出数据,然后讲解下.后台代码: public ActionResult O ...

  7. Kendo Web UI Grid数据绑定，删除，编辑，并把默认英文改成中文

    Kendo Web UI 是个不错的Jquery框.可惜老外写的,很多都是默认的英文,当然我们也可以设置成中文,接下来,我们就看看Grid是如何实现的数据绑定(Kendo Grid数据绑定实现有很多方 ...

  8. Asp.net mvc Kendo UI Grid的使用(二)

    上一篇文章对Kendo UI做了一些简单的介绍以及基本环境,这篇文章来介绍一下Grid的使用 先上效果图: 要实现这个效果在Controller在要先导入Kendo.Mvc.UI,Kendo.Mvc. ...

  9. 封装扩展Kendo UI Grid

    封装后的代码如下: function DataGrid(options) { this.options = { height: "100%", sortable: true, re ...

  10. kendo ui grid控件在选择行时如何取得所选行的某一列数据

    $("#grid").kendoGrid({ dataSource: dataSrc, columns: [ { template: '#=material_id#', width ...

随机推荐

  1. Flash(as3) 调整显示对象颜色

    在游戏开发中改变显示对象的颜色是比较常见的操作,那么除了在FlashCS中调整,AS3又提供了怎样的方式呢? ColorTransform 这个类是轻量级的应用,其构造参数如下: ColorTrans ...

  2. RDLC报表学习

    RDLC报表由以下三部分构成: 1.制作自己的DateSet集合(就是报表的数据集): 2.制作自己的报表文件.rdlc文件,用于画做报表样式,里面有微软自带的导出和打印功能,其实就为了少做这2个功能 ...

  3. 《ASP.NET MVC 5 破境之道》：第一境 ASP.Net MVC5项目初探 — 第三节：View层简单改造

    第一境 ASP.Net MVC5项目初探 — 第三节:View层简单改造 MVC默认模板的视觉设计从MVC1到MVC3都没有改变,比较陈旧了:在MVC4中做了升级,好看些,在不同的分辨率下,也能工作得 ...

  4. (进阶篇)PHP(thinkphp5框架)实现用户注册后邮箱验证，激活帐号

    本文将结合实例,讲解如何使用thinkphp5+Mysql完成注册帐号.发送激活邮件.验证激活帐号.处理URL链接过期的功能. 业务流程 1.用户提交注册信息. 2.写入数据库,此时帐号状态未激活. ...

  5. 双11，自动领取优惠券 js 代码

    http://www.zhihu.com/question/36426051/answer/67690322 本来我不熟悉 js,正好研究一下 (function(window, document) ...

  6. 一个Unix内核级别漏洞（一）

    翻译原创稿件,prison整理翻译,首发ichunqiu,原地址:http://lsd-pl.net/kernelvuln.pdf 这是一篇关于Unix内核级别漏洞的paper,由某团队发布在一次黑客 ...

  7. win7下oracle的安装

    1.参考地址1:http://www.cnblogs.com/libiao/archive/2008/08/24/1275000.html 2.参考地址2:http://www.server110.c ...

  8. 高仿IOS下拉刷新的粘虫效果

    最近看需要做一款下拉刷新的效果,由于需要和Ios界面保持一致,所以这用安卓的方式实现了ios下的下拉刷新的粘虫效果. 最新的安卓手机版本的QQ也有这种类似的效果,就是拖动未读信息的那个红色圆圈,拖动近 ...

  9. SLAP（Speaker-Listener Label Propagation Algorithm）社区发现算法

    其中部分转载的社区发现SLPA算法文章 一.概念 社区(community)定义:同一社区内的节点与节点之间关系紧密,而社区与社区之间的关系稀疏. 设图G=G(V,E),所谓社区发现是指在图G中确定n ...

  10. UiAutomator -- UiObject2 API

    1.点击与长按 void click() Clicks on this object. void click(long duration) Performs a click on this objec ...