十五、UI-Grid 工具提示
来源:互联网 发布:网络需求表 编辑:程序博客网 时间:2024/06/05 09:35
原文:117 Tooltips
当用户悬停在单元格上时,可以设置工具提示。
在columnDef 中设置 cellTooltip: true 后,此工具提示可以简单的单元格内容。
或者,它可以接收function 返回的当前列和行的值,例如:
cellTooltip: function(row, col) { return 'Name: ' + row.entity.name + ' Company: ' + row.entity.company; }
或者它可以是一个字符串,在这种情况下,字符串将显示:
cellTooltip: 'Custom tooltip - maybe some help text'
也可以用类似的方法设置一个headerTooltip ,默认是显示的是displayName。
注意,打开工具提示将会为每个单元格创建一个额外的监控,因此对表格整体性能会造成影响,不建议把他们对每一列,比如列有数据但在表格中不显示(如长描述字段)。
Tooltips 优先于cellFilter,所以如果定义了一个cellFilter 也可以用工具提示。
代码:
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', cellTooltip: 'Custom string', headerTooltip: 'Custom header string' }, { field: 'company', cellTooltip: function( row, col ) { return 'Name: ' + row.entity.name + ' Company: ' + row.entity.company; }, headerTooltip: function( col ) { return 'Header: ' + col.displayName; } }, { field: 'gender', cellTooltip: true, headerTooltip: true, cellFilter: 'mapGender' }, ], 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) { data.forEach( function setGender( row, index ){ row.gender = row.gender==='male' ? '1' : '2'; }); $scope.gridOptions.data = data; });}]).filter('mapGender', function() { var genderHash = { 1: 'male', 2: 'female' }; return function(input) { if (!input){ return ''; } else { return genderHash[input]; } };});
Demo
水平有限,不当之处敬请指正。
0 0
- 十五、UI-Grid 工具提示
- 二十五、UI-Grid 导出数据
- 工具提示ui
- 5.jQuery UI 工具提示UI
- Grid 提示
- Liger ui grid 参数
- ui-grid 网格布局
- kendo ui grid 汉化
- ui-grid的笔记
- angular ui-grid行单选
- ui-grid 使用讲解
- ui-grid 使用讲解
- 十、UI-Grid CellClass
- 十四、UI-Grid HeaderCellClass
- 十六、UI-Grid 菜单栏
- UI-Grid 排序
- ui-grid(1)--基础
- ui-grid 常用操作
- java学习笔记(八)break与contune的区别
- String、Static
- tomcat permgen space问题
- Hibernate中clear()与flush()
- 多线程(十二)CAS 和ABA问题
- 十五、UI-Grid 工具提示
- uva1484 Alice and Bob's Trip (树形dp)
- 重温算法之选择排序
- 终端命令行
- react-bits:Children类型
- js 图片浏览插件原生
- Velocity:快速熟悉实用语法详解
- 2017跟着小虎玩着去软考--趣味好玩解析2015年下半年信息系统项目管理师上午试题21-25题
- 欢迎使用CSDN-markdown编辑器