zoukankan      html  css  js  c++  java

  • [转]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.                                   '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: '名字', 
                                  '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/
    


    
    
                
    
                
              
    • 
              
    
              
  • 

                相关阅读:
    
                
                  使 div 元素看上去像一个按钮
                    
    ORM框架学习（二）
                    
    ORM框架学习（一）
                    
    创建我的第一个MVC4-基于ASPX
                    
    js实现简单的验证码
                    
    常见开发语言擅长领域
                    
    解决IE兼容问题,IE6,IE7,IE8,IE9,IE10
                    
    EF框架学习（7）---EF中的查询方法
                    
    EF框架学习（6）---EF中的在线场景保存数据
                    
    EF框架学习（5）---EF中的在线和离线场景
                    
                        
              
    • 
              
    
              
  • 
                原文地址：https://www.cnblogs.com/freeliver54/p/6868752.html
              
    • 

            

          



          
          

            

            

          

        

      

      



      

      

        

          Copyright © 2011-2022 走看看