[转]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 ...
随机推荐
- [翻译]NUnit---RequiredAddin and RequiresMTA Attributes(十六)
RequiredAddinAttribute (NUnit 2.5) RequiredAddin特性用于提示一个程序集需要特殊的插件才能保证功能正常.如果没有安装插件,整个程序集会被标记为未运行. N ...
- js图片自适应尺寸居中函数处理
/* | autoSerializePicture.js 自适应格式化图片 | auther : baichaohua/2017-09-21 +---------------------------- ...
- idea破解方式 附jar包
在安装了idea之后 去安装目录找到安装目录的 idea.exe.vmoptions 和 idea64.exe.vmoptions 两个文件在文件最后面追加上 -javaagent:C:/破解补丁的名 ...
- 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 ...
- kubernetes traefik multiple namespaces
官方文档在此 https://docs.traefik.io/user-guide/kubernetes/ 官方文档在配置 RBAC 时使用了 ClusterRoleBinding, 当你想用多命名空 ...
- fail2ban
在 [DEFAULT] 全局配置中的ignoreip选项中添加被放行的ip地址:ignoreip = 127.0.0.1 172.17.1.218 网段可以加 127.0.0.1/8,用空格隔开就行. ...
- jmeter测试计划配置
用户定义的变量: 测试计划上可以添加用户定义的变量.一般添加一些系统常用的配置.如果测试过程中想切换环境,切换配置,一般不建议在测试计划上添加变量,因为不方便启用和禁用,一般是直接添加用户自定义变量组 ...
- 读Lock-Free论文实践
论文地址:implementing Lock-Free Queue 论文大体讲的意思是:Lock-Base的程序的performance不好,并且a process inside the critic ...
- Java并发(一)-了解线程安全
线程不安全性 先来举例说明线程不安全是什么情况下发生的:例如一个变量可以被多个线程进行访问,那么在大量线程并发访问这个变量的情况下,线程执行的顺序会给最后的结果带来不可预估的错误. 先定义一个单例类S ...
- Xcode10 libstdc++.6.0.9.tbd移除引起的错误
/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS.sdk/u ...