本文转自：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. 【原创】Self-Contained Container（自包含容器）

    自包含容器是一种自包含的结构,很有趣.需要使用模板类,但只有在模板类型是该类的子类时,才使该类具有自包含的结构.这种结构从数据结构的角度看比较有用.通常的树类中的模板通常是“数据”的概念,即模板不参与 ...

  2. WPF之坑——ICommandSource与RoutedUICommand

    最近在项目中自己写了一个控件A,继承自contentcontrol,实现了icommandsource接口.(因需求特殊并没有使用buttonbase及它的派生类为基类),控件A在测试程序中运转良好, ...

  3. 【cocos2d-x 手游研发----精灵的八面玲珑】

    继续上一篇文章继续聊吧,这章内容会比较多,也会附上代码,很多朋友加了群,大家在群里面探讨了很多东西,这让大家都觉得受益匪浅,这便是极好的,废话不多了,精灵是游戏的重要组成部分,那ARPG里面的精灵必然 ...

  4. Web Server IIS7部署网站常遇到的错误及解决办法

    IIS7部署网站常遇到的错误及解决办法 经常遇到问题: 1.错误:403.14-Forbidden Web 服务器被配置为不列出此目录的内容及Login on failed for "IIS ...

  5. Socket编程入门

      socket基本知识 网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个socket. 建立网络通信连接至少要一对端口号(socket).socket本质是编程接口(AP ...

  6. BZOJ 1003--[ZJOI2006]物流运输（最短路）

    1003: [ZJOI2006]物流运输 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 10034  Solved: 4403 Description ...

  7. Sort-242. Valid Anagram

    Given two strings s and t, write a function to determine if t is an anagram of s. For example,s = &q ...

  8. 四：MyBatis学习总结(四)——解决字段名与实体类属性名不相同的冲突

    在平时的开发中,我们表中的字段名和表对应实体类的属性名称不一定都是完全相同的,下面来演示一下这种情况下的如何解决字段名与实体类属性名不相同的冲突. 一.准备演示需要使用的表和数据 CREATE TAB ...

  9. https数字证书交换过程介绍

    文章转自:https://www.2cto.com/kf/201804/739010.html,感谢原作者的辛苦整理,讲解的很清楚,谢谢. [https数字证书交换过程介绍] 注意:该问的背景用到了非 ...

  10. pycharm 使用jupyter notebook 报错：'_xsrf' argument missing from POST

    出问题的关键点就在: 我用cmd启动的jupyter notebook,然后用pycham新建了一个jupyter notebook 结果 一直报错'_xsrf' argument missing f ...