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

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[转]angularjs之ui-grid 使用详解相关的知识，希望对你有一定的参考价值。

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

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

html:

[html] view plain copy print?
  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:








[javascript] view plain copy print?




    

  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. 

  2. .controller(‘RootCtrl‘, function($scope,i18nService) {//前四个基本上是必用到的 后面的可以根据自身情况去加  
    3. 

  3.             // 国际化；  
    4. 

  4.             i18nService.setCurrentLang(‘zh-cn‘);  
    5. 

  5.             $scope.gridOptions = {  
    6. 

  6.                 data : ‘myData‘,  
    7. 

  7.                 //基础属性  
    8. 

  8.                 enableSorting : true,//是否支持排序(列)  
    9. 

  9.                 useExternalSorting : false,//是否支持自定义的排序规则  
    10. 

  10.                 enableRowHeaderSelection : false,  
    11. 

  11.                 enableGridMenu : false,//是否显示表格 菜单  
    12. 

  12.                 showGridFooter: true,//时候显示表格的footer  
    13. 

  13.                 enableHorizontalScrollbar : 1,//表格的水平滚动条  
    14. 

  14.                 enableVerticalScrollbar : 1,//表格的垂直滚动条 (两个都是 1-显示,0-不显示)  
    15. 

  15.                 selectionRowHeaderWidth : 30,  
    16. 

  16.                 enableCellEditOnFocus:false,//default为false,true的时候单击即可打开编辑(cellEdit为true的时候,需要引入‘ui.grid.cellNav‘)  
    17. 

  17.                 //分页属性  
    18. 

  18.                 enablePagination: true, //是否分页,default为true  
    19. 

  19.                 enablePaginationControls: true, //使用默认的底部分页  
    20. 

  20.                 paginationPageSizes: [10, 15, 20], //每页显示个数选项  
    21. 

  21.                 paginationCurrentPage:1, //当前的页码  
    22. 

  22.                 paginationPageSize: 10, //每页显示个数  
    23. 

  23.                 paginationTemplate:"<div></div>", //自定义底部分页代码  
    24. 

  24.                 totalItems : 0, // 总数量  
    25. 

  25.                 useExternalPagination: true,//是否使用分页按钮            
    26. 

  26.                 //选中  
    27. 

  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. 

  28.                 enableFooterTotalSelected: true, // 是否显示选中的总数,default为true,如果显示,showGridFooter 必须为true  
    29. 

  29.                 enableFullRowSelection : true, //是否点击行任意位置后选中,default为false,当为true时,checkbox可以显示但是不可选中  
    30. 

  30.                 enableRowHeaderSelection : true, //是否显示选中checkbox框 ,default为true  
    31. 

  31.                 enableRowSelection : true, // 行选择是否可用,default为true;  
    32. 

  32.                 enableSelectAll : true, // 选择所有checkbox是否可用，default为true;   
    33. 

  33.                 enableSelectionBatchEvent : true, //default为true  
    34. 

  34.                 modifierKeysToMultiSelect: false ,//default为false,为true时只能按ctrl或shift键进行多选,这个时候multiSelect必须为true;  
    35. 

  35.                 multiSelect: true ,// 是否可以选择多个,默认为true;  
    36. 

  36.                 noUnselect: false,//default为false,选中后是否可以取消选中  
    37. 

  37.                 selectionRowHeaderWidth:30 ,//default为30,设置选择列的宽度  
    38. 

  38.                 //api   
    39. 

  39.                 onRegisterApi : function (gridApi) {  
    40. 

  40.                     $scope.gridApi = gridApi;  
    41. 

  41.                     $scope.gridApi.edit.on.afterCellEdit($scope,function(rowEntity){  
    42. 

  42.                         //编辑离开事件  
    43. 

  43.                     });  
    44. 

  44.                       
    45. 

  45.                     $scope.gridApi.selection.on.rowSelectionChanged($scope,function(row,event){  
    46. 

  46.                        //行选中事件  
    47. 

  47.                      });  
    48. 

  48.                 },  
    49. 

  49.                  
    50. 

  50.                 //导出(只支持csv,扩展性不太好)  
    51. 

  51.                 exporterAllDataFn: function(){//导出全部  
    52. 

  52.                        return getAllData();  
    53. 

  53.                 },  
    54. 

  54.                 exporterCsvColumnSeparator: ‘,‘,  
    55. 

  55.                 exporterCsvFilename:‘testdown.csv‘,  
    56. 

  56.                 exporterFieldCallback : function ( grid, row, col, value ){//导出回调可以过滤条件  
    57. 

  57.                   
    58. 

  58.                     return value;  
    59. 

  59.                 },  
    60. 

  60.                 exporterHeaderFilterUseName : true,  
    61. 

  61.                 exporterMenuCsv : true,  
    62. 

  62.                 exporterMenuLabel : "Export",  
    63. 

  63.                 exporterMenuPdf : true,  
    64. 

  64.                 exporterOlderExcelCompatibility : false,//是否兼容低版本excel  
    65. 

  65.                 exporterPdfCustomFormatter : function ( docDefinition ) {  
    66. 

  66.                  docDefinition.styles.footerStyle = { bold: true, fontSize: 10 };  
    67. 

  67.                  return docDefinition;  
    68. 

  68.                 },  
    69. 

  69.                 exporterPdfFooter :{   
    70. 

  70.                                      text: ‘‘,   
    71. 

  71.                                      style: ‘‘   
    72. 

  72.                                    },  
    73. 

  73.                 exporterPdfDefaultStyle : {  
    74. 

  74.                   fontSize: 11,font:‘simblack‘ //font 设置自定义字体  
    75. 

  75.                 },  
    76. 

  76.                 exporterPdfFilename:‘testdown.pdf‘,  
    77. 

  77.                 exporterPdfFooter: function(currentPage, pageCount) {   
    78. 

  78.                        return currentPage.toString() + ‘ of ‘ + pageCount;   
    79. 

  79.                 },  
    80. 

  80.                 exporterPdfHeader : function(currentPage, pageCount) {   
    81. 

  81.                    return currentPage.toString() + ‘ of ‘ + pageCount;   
    82. 

  82.                 },  
    83. 

  83.                 exporterPdfMaxGridWidth : 720,  
    84. 

  84.                 exporterPdfOrientation : ‘landscape‘,//  ‘landscape‘ 或 ‘portrait‘ pdf横向或纵向  
    85. 

  85.                 exporterPdfPageSize : ‘A4‘,// ‘A4‘ or ‘LETTER‘   
    86. 

  86.                 exporterPdfTableHeaderStyle : {  
    87. 

  87.                  bold: true,  
    88. 

  88.                  fontSize: 12,  
    89. 

  89.                  color: ‘black‘  
    90. 

  90.                 },  
    91. 

  91.                 exporterPdfTableLayout : null,  
    92. 

  92.                 exporterPdfTableStyle: {  
    93. 

  93.                  margin: [0, 5, 0, 15]  
    94. 

  94.                 },  
    95. 

  95.                 exporterSuppressColumns : [‘name‘],//过滤不需要的列  
    96. 

  96.                 exporterSuppressMenu: false,  
    97. 

  97.                 //列属性设置  
    98. 

  98.                  columnDefs: [{   field: ‘name‘,   
    99. 

  99.                                  displayName: ‘名字‘,   
    100. 

  100.                                  width: ‘100‘, //宽度设置  
    101. 

  101.                                  enableColumnMenu: false,// 是否显示列头部菜单按钮  
    102. 

  102.                                  //enableHiding: false,  
    103. 

  103.                                  //suppressRemoveSort: true,  
    104. 

  104.                                  enableCellEdit: false, // 是否可编辑  
    105. 

  105.                                  cellEditableCondition:function($scope){  
    106. 

  106.                                     return boolean;//是否编辑控制  
    107. 

  107.                                  },  
    108. 

  108.                                  visible:true,是否显示default为true,  
    109. 

  109.                                  cellTemplate : ‘<a href="" ng-click="grid.appScope.viewPages(row.entity);">{{row.entity.name==1?"重写":""}}</a>‘,//重写cell  
    110. 

  110.                                  cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {  
    111. 

  111.                                   //做一些判断。。。  
    112. 

  112.                                   return ‘red‘//自定义样式   
    113. 

  113.                                 },  
    114. 

  114.                                  //cell下拉  
    115. 

  115.                                  editableCellTemplate: ‘ui-grid/dropdownEditor‘,  
    116. 

  116.                                  editDropdownOptionsArray: [],//[{name:1,nameText:‘Yoko‘}]  
    117. 

  117.                                  editDropdownIdLabel: ‘name‘,//id  
    118. 

  118.                                  editDropdownValueLabel: ‘nameText‘,//显示的名字  
    119. 

  119.                                    
    120. 

  120.                                  cellFilter:"nameFilet"//过滤器  
    121. 

  121.                              }  
    122. 

  122.                                
    123. 

  123.                             ],  
    124. 

  124.             };  
    125. 

  125.           var myData=[{name:‘‘}];  
    126. 

  126.         });  
    127. 






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:‘‘}];
        });




 


用到的自定义指令：








[javascript] view plain copy print?




    

  1. .directive(‘dblClickRow‘, [‘$compile‘, ‘$parse‘, function($compile, $parse) {  
    2. 

  2.           return {  
    3. 

  3.             priority : -190, // run after default uiGridCell directive  
    4. 

  4.             restrict : ‘A‘,  
    5. 

  5.             scope : false,  
    6. 

  6.   
    7. 

  7.             compile: function($element, attr) {  
    8. 

  8.   
    9. 

  9.                 // Get the function at ng-dblclick for ui-grid  
    10. 

  10.                 var fn = $parse(attr[‘ngDblclick‘], /* interceptorFn */ null, /* expensiveChecks */ true);  
    11. 

  11.   
    12. 

  12.                 return function ngEventHandler(scope, element) {  
    13. 

  13.   
    14. 

  14.                     element.on(‘dblclick‘, function(event) {  
    15. 

  15.   
    16. 

  16.                       var callback = function() {  
    17. 

  17.   
    18. 

  18.                         if ($scope.gridApi.grid.selection.lastSelectedRow)  
    19. 

  19.                         {  
    20. 

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

  21.                         }  
    22. 

  22.                       };  
    23. 

  23.   
    24. 

  24.                       $scope.$apply(callback);  
    25. 

  25.   
    26. 

  26.                     }  
    27. 

  27.                 )};  
    28. 

  28.   
    29. 

  29.             }  
    30. 

  30.   
    31. 

  31.             };  
    32. 

  32.         } ])  
    33. 






.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/


 
以上是关于[转]angularjs之ui-grid 使用详解的主要内容，如果未能解决你的问题，请参考以下文章
 

 ui-grid使用详解


 如何在AngularJS ui-grid中对分组行进行排序？


 AngularJS 1.6 + ES6 - 将jquery ui-grid回调数据返回到控制器[重复]


 AngularJS 1.6 + ES6 - 将jquery ui-grid回调数据返回给控制器[duplicate]


 AngularJS执行流程详解(转)


 angularjs中的路由介绍详解 ui-route(转)