本文转自：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. MySQL使用 IN 查询取出数据排序问题（与in排序相同、不排序）

    MySQL使用 IN 查询取出数据排序问题(与in排序相同) 今天在项目中遇到一个问题,就是做一个最近浏览的功能,但是功能做出来了,取出数据时候要用到类似这么一条带in查询的sql语句, select ...

  2. Android 创建自定义 View 的属性 (attrs) 时需要注意的问题

    自定义 View 的属性并不难,可以参照官方的文档 https://developer.android.com/training/custom-views/create-view.html 但是需要注 ...

  3. day 93 Restframwork

    苑昊博客: http://www.cnblogs.com/yuanchenqi/articles/7570003.html  一.queryset 特性 from django.db import m ...

  4. Day 42 协程. IO 并发

    一.什么是协程? 是单线程下的并发,又称微线程,纤程.英文名Coroutine.一句话说明什么是线程:协程是一种用户态的轻量级线程,即协程是由用户程序自己控制调度的. 协程相比于线程切换效率更快了. ...

  5. django Form的回顾--手动档和自动挡

      from django.shortcuts import renderfrom django.forms import Formfrom django.forms import fieldsfro ...

  6. jzoj5928

    tj:題解裡公式是錯的 我們可以考慮每一個節點[a,a+2^b-1]對答案的貢獻 則當這個節點是左兒子時,貢獻為2^b 是右兒子時,貢獻為2n−a−2b+12^n-a-2^b+12n−a−2b+1 左 ...

  7. window主机和centos主机之间相互传送文件

    命令实现linux和window文件传送 一:下载配置pscp软件从http://www.chiark.greenend.org.uk/~sgtatham/putty/download.html下载p ...

  8. (转)MySQL备份原理详解

    MySQL备份原理详解 原文:http://www.cnblogs.com/cchust/p/5452557.html 备份是数据安全的最后一道防线,对于任何数据丢失的场景,备份虽然不一定能恢复百分之 ...

  9. JavaScript中的垃圾回收机制与内存泄露

    什么是内存泄露? 任何编程语言,在运行时都需要使用到内存,比如在一个函数中, var arr = [1, 2, 3, 4, 5]; 这么一个数组,就需要内存. 但是,在使用了这些内存之后, 如果后面他 ...

  10. spring boot的拦截器简单使用

    1.spring boot拦截器默认有: HandlerInterceptorAdapter AbstractHandlerMapping UserRoleAuthorizationIntercept ...