本文转自：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. NET 文件批量下载

    HTML <a class="btn btn-warning" id="btnDownload">选中下载</a> JS /* 批量下载 ...

  2. SQL Server 维护计划（数据库备份）

    公司的项目都需要定期备份,程序备份关掉iis站点复制文件就可以了,难受的地方就是数据库的备份了.服务器上装的大都是英文版,一看见英文,操作都变得小心翼翼起来,生怕哪里搞错,第二天就要被安排写辞职申请了 ...

  3. 爬虫Scrapy指令学习

    1.新建一个新的爬虫项目指令 scrapy startproject xxx 2.在项目/spider目录下创建一个名为XXX的爬虫,并指定爬取域的范围  scrapy genspider XXX & ...

  4. Android事件分发机制浅析（2）

    本文来自网易云社区 作者:孙有军 上面的两次执行中每次都调用了onInterceptTouchEvent事件,这个到底又是啥?我们去看看他的返回值是什么? public boolean onInter ...

  5. 接口interface和抽象类型abstract

    一.接口 接口不能被实例化 接口只能包含方法声明 接口的成员包括方法.属性.索引器.事件 接口中不能包含常量.字段(域).构造函数.析构函数.静态成员 接口中的所有成员默认为public,因此接口中不 ...

  6. 网络编程——http协议

    1.TCP/IP 基本知识 一.概念 TCP/IP协议是一个协议的集合,它是由众多的互联网相关联的协议集合的总称.如图 二.TCP/IP分层管理 TCP/IP模型分为5层:应用层,传输层,网络层,数据 ...

  7. Js验证15/18身份证

    var vcity={ 11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古&quo ...

  8. php语法分析

    php的语法分析的主要作用是验证词法分析的基础上将token组成的序列,在php这门语言中是否是一个有效的句子,也可以理解为这些token序列是否匹配设计php这门语言时的语法模型,在匹配的情况下构建 ...

  9. 【BZOJ4184】shallot 线性基

    题目传送门:https://www.lydsy.com/JudgeOnline/problem.php?id=4184 此题如果我们不考虑删除元素这一个操作,那么就是一道裸的线性基题. 但是此题会删除 ...

  10. 归并排序的理解和实现(Java)

    归并排序介绍 归并排序(Merge Sort)就是利用归并的思想实现的排序方法.它的原理是假设初始序列含有fn个记录,则可以看成是n个有序的子序列,每个子序列的长度为1,然后两两归并,得到[n2\fr ...