本文转自：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. [翻译]NUnit---RequiredAddin and RequiresMTA Attributes(十六)

    RequiredAddinAttribute (NUnit 2.5) RequiredAddin特性用于提示一个程序集需要特殊的插件才能保证功能正常.如果没有安装插件,整个程序集会被标记为未运行. N ...

  2. js图片自适应尺寸居中函数处理

    /* | autoSerializePicture.js 自适应格式化图片 | auther : baichaohua/2017-09-21 +---------------------------- ...

  3. idea破解方式 附jar包

    在安装了idea之后 去安装目录找到安装目录的 idea.exe.vmoptions 和 idea64.exe.vmoptions 两个文件在文件最后面追加上 -javaagent:C:/破解补丁的名 ...

  4. Binary Search-483. Smallest Good Base

    For an integer n, we call k>=2 a good base of n, if all digits of n base k are 1. Now given a str ...

  5. kubernetes traefik multiple namespaces

    官方文档在此 https://docs.traefik.io/user-guide/kubernetes/ 官方文档在配置 RBAC 时使用了 ClusterRoleBinding, 当你想用多命名空 ...

  6. fail2ban

    在 [DEFAULT] 全局配置中的ignoreip选项中添加被放行的ip地址:ignoreip = 127.0.0.1 172.17.1.218 网段可以加 127.0.0.1/8,用空格隔开就行. ...

  7. jmeter测试计划配置

    用户定义的变量: 测试计划上可以添加用户定义的变量.一般添加一些系统常用的配置.如果测试过程中想切换环境,切换配置,一般不建议在测试计划上添加变量,因为不方便启用和禁用,一般是直接添加用户自定义变量组 ...

  8. 读Lock-Free论文实践

    论文地址:implementing Lock-Free Queue 论文大体讲的意思是:Lock-Base的程序的performance不好,并且a process inside the critic ...

  9. Java并发（一）-了解线程安全

    线程不安全性 先来举例说明线程不安全是什么情况下发生的:例如一个变量可以被多个线程进行访问,那么在大量线程并发访问这个变量的情况下,线程执行的顺序会给最后的结果带来不可预估的错误. 先定义一个单例类S ...

  10. Xcode10 libstdc++.6.0.9.tbd移除引起的错误

    /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS.sdk/u ...