[转]UI-Grid HeaderCellClass
本文转自:http://blog.csdn.net/vesong87/article/details/69230476
在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的更多相关文章
- NGUI UI Grid, two column
NGUI UI Grid, two column, set Arrangement Horizontal, Column Limit 2.
- Kendo Web UI Grid添加一个html控件如(checkbox,button)
在Kendo Web UI Grid增加一个控件如效果图: <div id="grid1"></div><script> $("#gr ...
- kendo ui grid选中行事件,获取combobox选择的值
背景: 以前用 telerik ui做的grid现在又要换成kendo ui,不过说句实话kendo ui真的比telerik好多,可以说超级升级改头换面.当然用的mvc的辅助方法,以前的teleri ...
- Kendo UI Grid 使用总结
Kendo UI Grid控件的功能强大,这里将常用的一些功能总结一下. Kendo UI Grid 固定列 在使用Gird控件显示数据时,如果数据列过多,会出现横向滚动条,很多情况下,我们希望某些列 ...
- Kendo UI Grid 批量编辑使用总结
项目中使用Kendo UI Grid控件实现批量编辑,现在将用到的功能总结一下. 批量编辑基本设置 Kendo Grid的设置方法如下: $("#grid").kendoGrid( ...
- [Asp.net mvc] Asp.net mvc Kendo UI Grid的使用(四)
有段时间没写博客了,工作状态比较忙,抽空继续总结下Grid的使用,这次主要介绍模板以及其他官网介绍不详尽的使用方法.先Show出数据,然后讲解下.后台代码: public ActionResult O ...
- Kendo Web UI Grid数据绑定,删除,编辑,并把默认英文改成中文
Kendo Web UI 是个不错的Jquery框.可惜老外写的,很多都是默认的英文,当然我们也可以设置成中文,接下来,我们就看看Grid是如何实现的数据绑定(Kendo Grid数据绑定实现有很多方 ...
- Asp.net mvc Kendo UI Grid的使用(二)
上一篇文章对Kendo UI做了一些简单的介绍以及基本环境,这篇文章来介绍一下Grid的使用 先上效果图: 要实现这个效果在Controller在要先导入Kendo.Mvc.UI,Kendo.Mvc. ...
- 封装扩展Kendo UI Grid
封装后的代码如下: function DataGrid(options) { this.options = { height: "100%", sortable: true, re ...
- kendo ui grid控件在选择行时如何取得所选行的某一列数据
$("#grid").kendoGrid({ dataSource: dataSrc, columns: [ { template: '#=material_id#', width ...
随机推荐
- NET 文件批量下载
HTML <a class="btn btn-warning" id="btnDownload">选中下载</a> JS /* 批量下载 ...
- SQL Server 维护计划(数据库备份)
公司的项目都需要定期备份,程序备份关掉iis站点复制文件就可以了,难受的地方就是数据库的备份了.服务器上装的大都是英文版,一看见英文,操作都变得小心翼翼起来,生怕哪里搞错,第二天就要被安排写辞职申请了 ...
- 爬虫Scrapy指令学习
1.新建一个新的爬虫项目指令 scrapy startproject xxx 2.在项目/spider目录下创建一个名为XXX的爬虫,并指定爬取域的范围 scrapy genspider XXX & ...
- Android事件分发机制浅析(2)
本文来自网易云社区 作者:孙有军 上面的两次执行中每次都调用了onInterceptTouchEvent事件,这个到底又是啥?我们去看看他的返回值是什么? public boolean onInter ...
- 接口interface和抽象类型abstract
一.接口 接口不能被实例化 接口只能包含方法声明 接口的成员包括方法.属性.索引器.事件 接口中不能包含常量.字段(域).构造函数.析构函数.静态成员 接口中的所有成员默认为public,因此接口中不 ...
- 网络编程——http协议
1.TCP/IP 基本知识 一.概念 TCP/IP协议是一个协议的集合,它是由众多的互联网相关联的协议集合的总称.如图 二.TCP/IP分层管理 TCP/IP模型分为5层:应用层,传输层,网络层,数据 ...
- Js验证15/18身份证
var vcity={ 11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古&quo ...
- php语法分析
php的语法分析的主要作用是验证词法分析的基础上将token组成的序列,在php这门语言中是否是一个有效的句子,也可以理解为这些token序列是否匹配设计php这门语言时的语法模型,在匹配的情况下构建 ...
- 【BZOJ4184】shallot 线性基
题目传送门:https://www.lydsy.com/JudgeOnline/problem.php?id=4184 此题如果我们不考虑删除元素这一个操作,那么就是一道裸的线性基题. 但是此题会删除 ...
- 归并排序的理解和实现(Java)
归并排序介绍 归并排序(Merge Sort)就是利用归并的思想实现的排序方法.它的原理是假设初始序列含有fn个记录,则可以看成是n个有序的子序列,每个子序列的长度为1,然后两两归并,得到[n2\fr ...