十六、UI-Grid 菜单栏
来源:互联网 发布:笔试面试成绩怎么算法 编辑:程序博客网 时间:2024/06/04 18:11
原文:121 Grid Menu
表格菜单栏可以通过gridOption 中设置 enableGridMenu: true 来开启。这将在表格的右上方添加一个图标,该图标浮动在列标题的上方。默认菜单可以显示/隐藏列,还可以自定义额外的动作。
每个菜单项都可以自定义功能:
- shown:一个function,用来决定该项是否显示的
- title:菜单项显示的标题(注意,也可以使用 i18n 通过 gridMenuTitleFilter 设置)
- icon:显示在项目旁边的图标
- action:当菜单被点击时将被调用的function
- active:一个function,用来高亮显示该项()
- context:默认情况下,action、shown 和 active 的上下文将作为属性添加到grid 中,菜单项可以通过this.context添加上下文属性来传递自己的上下文。
- leaveOpen:默认是false,如果设置为true,将在菜单操作后打开
- order:菜单中项目的顺序。列300 -> 300 + numColumns ×2,导入和导出分别为150和200
导出功能还向该菜单添加菜单项。exporterMenuCsv设置为false,可以禁用CSV的导出。如果选择了一行,则只提供“导出选择行”选项。
列标题可以使用gridMenuTitleFilter自定义筛选器来定义,当你有一个国际化的两列标题,你也希望它们在表格菜单中国际化,翻译需要返回一个字符串或者一个deferred.promise的字符串。在下面的例子中,我们创建了一个假国际化函数,等待1秒,然后用”col: “连接。
可以通过gridMenuShowHideColumns: false来关闭 gridOption 显示和隐藏列的功能,也可以通过设置enableHiding 来关闭columnDef 显示和隐藏单个列的功能。
gridMenu 的按钮还是有点丑。可以在CSS中覆盖适合应用程序的高度:
.ui-grid-menu-button { height: 31px;}
代码:
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"> <div id="grid1" ui-grid="gridOptions" ui-grid-exporter ui-grid-selection class="grid"></div> <div ng-if='columnChanged'> Column Visibility Changed - name: {{ columnChanged.name }} visible: {{ columnChanged.visible }} </div> </div> </body></html>
mian.css
.grid { width: 500px; height: 400px;}.my-custom-menu { position: absolute;}.my-custom-menu .ui-grid-menu { padding: 0px;}.my-custom-menu .ui-grid-menu-inner { -webkit-box-shadow: none; box-shadow: none;}.rotated { transform: rotate(180deg); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg);}
app.js
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.exporter', 'ui.grid.selection']);app.controller('MainCtrl', ['$scope', '$http', '$interval', '$q', function ($scope, $http, $interval, $q) { var fakeI18n = function( title ){ var deferred = $q.defer(); $interval( function() { deferred.resolve( 'col: ' + title ); }, 1000, 1); return deferred.promise; }; $scope.gridOptions = { exporterMenuCsv: false, enableGridMenu: true, gridMenuTitleFilter: fakeI18n, columnDefs: [ { name: 'name' }, { name: 'gender', enableHiding: false }, { name: 'company' } ], gridMenuCustomItems: [ { title: 'Rotate Grid', action: function ($event) { this.grid.element.toggleClass('rotated'); }, order: 210 } ], onRegisterApi: function( gridApi ){ $scope.gridApi = gridApi; // interval of zero just to allow the directive to have initialized $interval( function() { gridApi.core.addToGridMenu( gridApi.grid, [{ title: 'Dynamic item', order: 100}]); }, 0, 1); gridApi.core.on.columnVisibilityChanged( $scope, function( changedColumn ){ $scope.columnChanged = { name: changedColumn.colDef.name, visible: changedColumn.colDef.visible }; }); } }; $http.get('/data/100.json') .success(function(data) { $scope.gridOptions.data = data; });}]);
Demo
1 0
- 十六、UI-Grid 菜单栏
- 二十六、UI-Grid 导入数据
- ioS -UI-菜单栏的实现
- element-ui 设置菜单栏展开
- 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(1)--基础
- ui-grid 常用操作
- 改写ui-grid headerCellTemplate
- Kendo UI Grid
- ORA-32004: obsolete or deprecated parameter(s) specified for RDBMS instance
- okserver模块里, 项目对象类与DownloadInfo对象类接合的方法
- Win10专业版下图片拖到PS无法打开的解决技巧
- 用户登录记住密码功能的实现
- 引用与指针的比较
- 十六、UI-Grid 菜单栏
- 使用笔记本电脑需要注意的问题
- redis数据库基本操作
- 样式初始化
- 一个http请求过程
- markdown 语法
- java基础知识总结3方法与api文档使用
- react点击事件传参
- [转]Linux 安装*src.rpm