[转]angularjs之ui-grid 使用详解

本文转自：http://blog.csdn.net/qhkabuqiluo/article/details/52237710

最近一段时间在使用angularjs 然后就找到ui-grid 这个比较不错的表格插件，感觉还不错，所以分享给大家（ps:新手第一次发）

html:

1. <pre name="code" class="html"><!--ui-grid css-->
2. <link rel="stylesheet" type="text/css" href="../lib/angular-ui/ui-grid/ui-grid.min.css">
3. <div class="gridStyle" ui-grid="gridOptions" ui-grid-selection ui-grid-resize-columns ui-grid-auto-resize ui-grid-exporter ui-grid-edit ui-gird-pagination ui-grid-cellnav>
4. </div>
5. <!--ui-grid js-->
6. <script src="../lib/angular-ui/ui-grid/ui-grid.min.js"></script>
7. <!--ui-grid excel export-->
8. <script src="../lib/angular-ui/ui-grid/csv.js"></script>
9. <!--ui-grid pdf export-->
10. <script src="../lib/angular-ui/ui-grid/pdfmake.min.js"></script>
11. <script src="../lib/angular-ui/ui-grid/vfs_fonts.js"></script>
12. <!--ui-grid-selection 选择行指令-->
13. <!--ui-grid-resize-columns 表格宽可拉伸指令-->
14. <!--ui-grid-auto-resize 自动使用div的高度和宽度指令-->
15. <!--ui-grid-exporter 导出指令-->
16. <!--ui-grid-edit 编辑指令-->
17. <!--ui-gird-pagination 分页指令-->
18. <!--ui-gird-pagination 分页指令-->
19. <!--ui-grid-cellnav 单元格指令-->
20. <!--gridStyle 自定义设置样式-->

<pre name="code" class="html"><!--ui-grid css-->
<link rel="stylesheet" type="text/css" href="../lib/angular-ui/ui-grid/ui-grid.min.css">
<div class="gridStyle" ui-grid="gridOptions" ui-grid-selection ui-grid-resize-columns ui-grid-auto-resize ui-grid-exporter ui-grid-edit ui-gird-pagination ui-grid-cellnav>
</div>
<!--ui-grid js-->
<script src="../lib/angular-ui/ui-grid/ui-grid.min.js"></script>
<!--ui-grid excel export-->
<script src="../lib/angular-ui/ui-grid/csv.js"></script>
<!--ui-grid pdf export-->
<script src="../lib/angular-ui/ui-grid/pdfmake.min.js"></script>
<script src="../lib/angular-ui/ui-grid/vfs_fonts.js"></script>
<!--ui-grid-selection 选择行指令-->
<!--ui-grid-resize-columns 表格宽可拉伸指令-->
<!--ui-grid-auto-resize 自动使用div的高度和宽度指令-->
<!--ui-grid-exporter 导出指令-->
<!--ui-grid-edit 编辑指令-->
<!--ui-gird-pagination 分页指令-->
<!--ui-gird-pagination 分页指令-->
<!--ui-grid-cellnav 单元格指令-->
<!--gridStyle 自定义设置样式-->

js:

1. angular.module('app', ['ui.grid','ui.grid.selection','ui.grid.resizeColumns','ui.grid.autoResize','ui.grid.edit','ui.grid.exporter','ui.grid.pagination','ui.grid.cellNav'])
2. .controller('RootCtrl', function($scope,i18nService) {//前四个基本上是必用到的 后面的可以根据自身情况去加
3. // 国际化；
4. i18nService.setCurrentLang('zh-cn');
5. $scope.gridOptions = {
6. data : 'myData',
7. //基础属性
8. enableSorting : true,//是否支持排序(列)
9. useExternalSorting : false,//是否支持自定义的排序规则
10. enableRowHeaderSelection : false,
11. enableGridMenu : false,//是否显示表格 菜单
12. showGridFooter: true,//时候显示表格的footer
13. enableHorizontalScrollbar : 1,//表格的水平滚动条
14. enableVerticalScrollbar : 1,//表格的垂直滚动条 (两个都是 1-显示,0-不显示)
15. selectionRowHeaderWidth : 30,
16. enableCellEditOnFocus:false,//default为false,true的时候单击即可打开编辑(cellEdit为true的时候,需要引入'ui.grid.cellNav')
17. //分页属性
18. enablePagination: true, //是否分页,default为true
19. enablePaginationControls: true, //使用默认的底部分页
20. paginationPageSizes: [10, 15, 20], //每页显示个数选项
21. paginationCurrentPage:1, //当前的页码
22. paginationPageSize: 10, //每页显示个数
23. paginationTemplate:"<div></div>", //自定义底部分页代码
24. totalItems : 0, // 总数量
25. useExternalPagination: true,//是否使用分页按钮
26. //选中
27. rowTemplate: "<div ng-dblclick=\"grid.appScope.onDblClick(row)\" ng-repeat=\"(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name\" class=\"ui-grid-cell\" ng-class=\"{ 'ui-grid-row-header-cell': col.isRowHeader }\" ui-grid-cell></div>",//双击行事件
28. enableFooterTotalSelected: true, // 是否显示选中的总数,default为true,如果显示,showGridFooter 必须为true
29. enableFullRowSelection : true, //是否点击行任意位置后选中,default为false,当为true时,checkbox可以显示但是不可选中
30. enableRowHeaderSelection : true, //是否显示选中checkbox框 ,default为true
31. enableRowSelection : true, // 行选择是否可用,default为true;
32. enableSelectAll : true, // 选择所有checkbox是否可用，default为true;
33. enableSelectionBatchEvent : true, //default为true
34. modifierKeysToMultiSelect: false ,//default为false,为true时只能按ctrl或shift键进行多选,这个时候multiSelect必须为true;
35. multiSelect: true ,// 是否可以选择多个,默认为true;
36. noUnselect: false,//default为false,选中后是否可以取消选中
37. selectionRowHeaderWidth:30 ,//default为30,设置选择列的宽度
38. //api
39. onRegisterApi : function (gridApi) {
40. $scope.gridApi = gridApi;
41. $scope.gridApi.edit.on.afterCellEdit($scope,function(rowEntity){
42. //编辑离开事件
43. });
44. $scope.gridApi.selection.on.rowSelectionChanged($scope,function(row,event){
45. //行选中事件
46. });
47. },
48. //导出(只支持csv,扩展性不太好)
49. exporterAllDataFn: function(){//导出全部
50. return getAllData();
51. },
52. exporterCsvColumnSeparator: ',',
53. exporterCsvFilename:'testdown.csv',
54. exporterFieldCallback : function ( grid, row, col, value ){//导出回调可以过滤条件
55. return value;
56. },
57. exporterHeaderFilterUseName : true,
58. exporterMenuCsv : true,
59. exporterMenuLabel : "Export",
60. exporterMenuPdf : true,
61. exporterOlderExcelCompatibility : false,//是否兼容低版本excel
62. exporterPdfCustomFormatter : function ( docDefinition ) {
63. docDefinition.styles.footerStyle = { bold: true, fontSize: 10 };
64. return docDefinition;
65. },
66. exporterPdfFooter :{
67. text: '',
68. style: ''
69. },
70. exporterPdfDefaultStyle : {
71. fontSize: 11,font:'simblack' //font 设置自定义字体
72. },
73. exporterPdfFilename:'testdown.pdf',
74. exporterPdfFooter: function(currentPage, pageCount) {
75. return currentPage.toString() + ' of ' + pageCount;
76. },
77. exporterPdfHeader : function(currentPage, pageCount) {
78. return currentPage.toString() + ' of ' + pageCount;
79. },
80. exporterPdfMaxGridWidth : 720,
81. exporterPdfOrientation : 'landscape',//  'landscape' 或 'portrait' pdf横向或纵向
82. exporterPdfPageSize : 'A4',// 'A4' or 'LETTER'
83. exporterPdfTableHeaderStyle : {
84. bold: true,
85. fontSize: 12,
86. color: 'black'
87. },
88. exporterPdfTableLayout : null,
89. exporterPdfTableStyle: {
90. margin: [0, 5, 0, 15]
91. },
92. exporterSuppressColumns : ['name'],//过滤不需要的列
93. exporterSuppressMenu: false,
94. //列属性设置
95. columnDefs: [{   field: 'name',
96. displayName: '名字',
97. width: '100', //宽度设置
98. enableColumnMenu: false,// 是否显示列头部菜单按钮
99. //enableHiding: false,
100. //suppressRemoveSort: true,
101. enableCellEdit: false, // 是否可编辑
102. cellEditableCondition:function($scope){
103. return boolean;//是否编辑控制
104. },
105. visible:true,是否显示default为true,
106. cellTemplate : '<a href="" ng-click="grid.appScope.viewPages(row.entity);">{{row.entity.name==1?"重写":""}}</a>',//重写cell
107. cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
108. //做一些判断。。。
109. return 'red'//自定义样式
110. },
111. //cell下拉
112. editableCellTemplate: 'ui-grid/dropdownEditor',
113. editDropdownOptionsArray: [],//[{name:1,nameText:'Yoko'}]
114. editDropdownIdLabel: 'name',//id
115. editDropdownValueLabel: 'nameText',//显示的名字
116. cellFilter:"nameFilet"//过滤器
117. }
118. ],
119. };
120. var myData=[{name:''}];
121. });

angular.module('app', ['ui.grid','ui.grid.selection','ui.grid.resizeColumns','ui.grid.autoResize','ui.grid.edit','ui.grid.exporter','ui.grid.pagination','ui.grid.cellNav'])
.controller('RootCtrl', function($scope,i18nService) {//前四个基本上是必用到的 后面的可以根据自身情况去加
            // 国际化；
            i18nService.setCurrentLang('zh-cn');
            $scope.gridOptions = {
				data : 'myData',
				//基础属性
				enableSorting : true,//是否支持排序(列)
				useExternalSorting : false,//是否支持自定义的排序规则
				enableRowHeaderSelection : false,
				enableGridMenu : false,//是否显示表格 菜单
				showGridFooter: true,//时候显示表格的footer
				enableHorizontalScrollbar : 1,//表格的水平滚动条
				enableVerticalScrollbar : 1,//表格的垂直滚动条 (两个都是 1-显示,0-不显示)
				selectionRowHeaderWidth : 30,
				enableCellEditOnFocus:false,//default为false,true的时候单击即可打开编辑(cellEdit为true的时候,需要引入'ui.grid.cellNav')
				//分页属性
                enablePagination: true, //是否分页,default为true
                enablePaginationControls: true, //使用默认的底部分页
                paginationPageSizes: [10, 15, 20], //每页显示个数选项
                paginationCurrentPage:1, //当前的页码
                paginationPageSize: 10, //每页显示个数
                paginationTemplate:"<div></div>", //自定义底部分页代码
                totalItems : 0, // 总数量
                useExternalPagination: true,//是否使用分页按钮
                //选中
				rowTemplate: "<div ng-dblclick=\"grid.appScope.onDblClick(row)\" ng-repeat=\"(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name\" class=\"ui-grid-cell\" ng-class=\"{ 'ui-grid-row-header-cell': col.isRowHeader }\" ui-grid-cell></div>",//双击行事件
                enableFooterTotalSelected: true, // 是否显示选中的总数,default为true,如果显示,showGridFooter 必须为true
                enableFullRowSelection : true, //是否点击行任意位置后选中,default为false,当为true时,checkbox可以显示但是不可选中
                enableRowHeaderSelection : true, //是否显示选中checkbox框 ,default为true
                enableRowSelection : true, // 行选择是否可用,default为true;
                enableSelectAll : true, // 选择所有checkbox是否可用，default为true;
                enableSelectionBatchEvent : true, //default为true
                modifierKeysToMultiSelect: false ,//default为false,为true时只能按ctrl或shift键进行多选,这个时候multiSelect必须为true;
                multiSelect: true ,// 是否可以选择多个,默认为true;
                noUnselect: false,//default为false,选中后是否可以取消选中
                selectionRowHeaderWidth:30 ,//default为30,设置选择列的宽度
				//api
				onRegisterApi : function (gridApi) {
					$scope.gridApi = gridApi;
					$scope.gridApi.edit.on.afterCellEdit($scope,function(rowEntity){
						//编辑离开事件
					});

                    $scope.gridApi.selection.on.rowSelectionChanged($scope,function(row,event){
                       //行选中事件
                     });
				},

                //导出(只支持csv,扩展性不太好)
                exporterAllDataFn: function(){//导出全部
                       return getAllData();
                },
                exporterCsvColumnSeparator: ',',
                exporterCsvFilename:'testdown.csv',
                exporterFieldCallback : function ( grid, row, col, value ){//导出回调可以过滤条件

					return value;
                },
                exporterHeaderFilterUseName : true,
                exporterMenuCsv : true,
                exporterMenuLabel : "Export",
                exporterMenuPdf : true,
                exporterOlderExcelCompatibility : false,//是否兼容低版本excel
                exporterPdfCustomFormatter : function ( docDefinition ) {
                 docDefinition.styles.footerStyle = { bold: true, fontSize: 10 };
                 return docDefinition;
                },
                exporterPdfFooter :{
                                     text: '',
                                     style: ''
                                   },
                exporterPdfDefaultStyle : {
                  fontSize: 11,font:'simblack' //font 设置自定义字体
                },
                exporterPdfFilename:'testdown.pdf',
                exporterPdfFooter: function(currentPage, pageCount) {
                       return currentPage.toString() + ' of ' + pageCount;
                },
                exporterPdfHeader : function(currentPage, pageCount) {
                   return currentPage.toString() + ' of ' + pageCount;
                },
                exporterPdfMaxGridWidth : 720,
                exporterPdfOrientation : 'landscape',//  'landscape' 或 'portrait' pdf横向或纵向
                exporterPdfPageSize : 'A4',// 'A4' or 'LETTER'
                exporterPdfTableHeaderStyle : {
                 bold: true,
                 fontSize: 12,
                 color: 'black'
                },
                exporterPdfTableLayout : null,
                exporterPdfTableStyle: {
                 margin: [0, 5, 0, 15]
                },
                exporterSuppressColumns : ['name'],//过滤不需要的列
                exporterSuppressMenu: false,
				//列属性设置
				 columnDefs: [{   field: 'name',
                                 displayName: '名字',
                                 width: '100', //宽度设置
                                 enableColumnMenu: false,// 是否显示列头部菜单按钮
                                 //enableHiding: false,
                                 //suppressRemoveSort: true,
                                 enableCellEdit: false, // 是否可编辑
								 cellEditableCondition:function($scope){
									return boolean;//是否编辑控制
								 },
								 visible:true,是否显示default为true,
								 cellTemplate : '<a href="" ng-click="grid.appScope.viewPages(row.entity);">{{row.entity.name==1?"重写":""}}</a>',//重写cell
								 cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
								  //做一些判断。。。
								  return 'red'//自定义样式
								},
								 //cell下拉
								 editableCellTemplate: 'ui-grid/dropdownEditor',
								 editDropdownOptionsArray: [],//[{name:1,nameText:'Yoko'}]
								 editDropdownIdLabel: 'name',//id
								 editDropdownValueLabel: 'nameText',//显示的名字

								 cellFilter:"nameFilet"//过滤器
                             }

                            ],
            };
          var myData=[{name:''}];
        });

 

用到的自定义指令：

1. .directive('dblClickRow', ['$compile', '$parse', function($compile, $parse) {
2. return {
3. priority : -190, // run after default uiGridCell directive
4. restrict : 'A',
5. scope : false,
6. compile: function($element, attr) {
7. // Get the function at ng-dblclick for ui-grid
8. var fn = $parse(attr['ngDblclick'], /* interceptorFn */ null, /* expensiveChecks */ true);
9. return function ngEventHandler(scope, element) {
10. element.on('dblclick', function(event) {
11. var callback = function() {
12. if ($scope.gridApi.grid.selection.lastSelectedRow)
13. {
14. fn($scope, {$event:event, row: $scope.gridApi.grid.selection.lastSelectedRow.entity });
15. }
16. };
17. $scope.$apply(callback);
18. }
19. )};
20. }
21. };
22. } ])

.directive('dblClickRow', ['$compile', '$parse', function($compile, $parse) {
		  return {
			priority : -190, // run after default uiGridCell directive
			restrict : 'A',
			scope : false,

			compile: function($element, attr) {

				// Get the function at ng-dblclick for ui-grid
				var fn = $parse(attr['ngDblclick'], /* interceptorFn */ null, /* expensiveChecks */ true);

				return function ngEventHandler(scope, element) {

					element.on('dblclick', function(event) {

					  var callback = function() {

						if ($scope.gridApi.grid.selection.lastSelectedRow)
						{
							fn($scope, {$event:event, row: $scope.gridApi.grid.selection.lastSelectedRow.entity });
						}
					  };

					  $scope.$apply(callback);

					}
				)};

			}

			};
		} ])

ui-grid  api：http://ui-grid.info/docs/#/api/