码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-05-17 18:23:01      阅读:1828      评论:0      收藏:0      [点我收藏+]

标签:string   handle   cape   nav   alt   ati   change   rest   sheet   

本文转自: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:
[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. .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.                       
  45.                     $scope.gridApi.selection.on.rowSelectionChanged($scope,function(row,event){  
  46.                        //行选中事件  
  47.                      });  
  48.                 },  
  49.                  
  50.                 //导出(只支持csv,扩展性不太好)  
  51.                 exporterAllDataFn: function(){//导出全部  
  52.                        return getAllData();  
  53.                 },  
  54.                 exporterCsvColumnSeparator: ‘,‘,  
  55.                 exporterCsvFilename:‘testdown.csv‘,  
  56.                 exporterFieldCallback : function ( grid, row, col, value ){//导出回调可以过滤条件  
  57.                   
  58.                     return value;  
  59.                 },  
  60.                 exporterHeaderFilterUseName : true,  
  61.                 exporterMenuCsv : true,  
  62.                 exporterMenuLabel : "Export",  
  63.                 exporterMenuPdf : true,  
  64.                 exporterOlderExcelCompatibility : false,//是否兼容低版本excel  
  65.                 exporterPdfCustomFormatter : function ( docDefinition ) {  
  66.                  docDefinition.styles.footerStyle = { bold: true, fontSize: 10 };  
  67.                  return docDefinition;  
  68.                 },  
  69.                 exporterPdfFooter :{   
  70.                                      text: ‘‘,   
  71.                                      style: ‘‘   
  72.                                    },  
  73.                 exporterPdfDefaultStyle : {  
  74.                   fontSize: 11,font:‘simblack‘ //font 设置自定义字体  
  75.                 },  
  76.                 exporterPdfFilename:‘testdown.pdf‘,  
  77.                 exporterPdfFooter: function(currentPage, pageCount) {   
  78.                        return currentPage.toString() + ‘ of ‘ + pageCount;   
  79.                 },  
  80.                 exporterPdfHeader : function(currentPage, pageCount) {   
  81.                    return currentPage.toString() + ‘ of ‘ + pageCount;   
  82.                 },  
  83.                 exporterPdfMaxGridWidth : 720,  
  84.                 exporterPdfOrientation : ‘landscape‘,//  ‘landscape‘ 或 ‘portrait‘ pdf横向或纵向  
  85.                 exporterPdfPageSize : ‘A4‘,// ‘A4‘ or ‘LETTER‘   
  86.                 exporterPdfTableHeaderStyle : {  
  87.                  bold: true,  
  88.                  fontSize: 12,  
  89.                  color: ‘black‘  
  90.                 },  
  91.                 exporterPdfTableLayout : null,  
  92.                 exporterPdfTableStyle: {  
  93.                  margin: [0, 5, 0, 15]  
  94.                 },  
  95.                 exporterSuppressColumns : [‘name‘],//过滤不需要的列  
  96.                 exporterSuppressMenu: false,  
  97.                 //列属性设置  
  98.                  columnDefs: [{   field: ‘name‘,   
  99.                                  displayName: ‘名字‘,   
  100.                                  width: ‘100‘, //宽度设置  
  101.                                  enableColumnMenu: false,// 是否显示列头部菜单按钮  
  102.                                  //enableHiding: false,  
  103.                                  //suppressRemoveSort: true,  
  104.                                  enableCellEdit: false, // 是否可编辑  
  105.                                  cellEditableCondition:function($scope){  
  106.                                     return boolean;//是否编辑控制  
  107.                                  },  
  108.                                  visible:true,是否显示default为true,  
  109.                                  cellTemplate : ‘<a href="" ng-click="grid.appScope.viewPages(row.entity);">{{row.entity.name==1?"重写":""}}</a>‘,//重写cell  
  110.                                  cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {  
  111.                                   //做一些判断。。。  
  112.                                   return ‘red‘//自定义样式   
  113.                                 },  
  114.                                  //cell下拉  
  115.                                  editableCellTemplate: ‘ui-grid/dropdownEditor‘,  
  116.                                  editDropdownOptionsArray: [],//[{name:1,nameText:‘Yoko‘}]  
  117.                                  editDropdownIdLabel: ‘name‘,//id  
  118.                                  editDropdownValueLabel: ‘nameText‘,//显示的名字  
  119.                                    
  120.                                  cellFilter:"nameFilet"//过滤器  
  121.                              }  
  122.                                
  123.                             ],  
  124.             };  
  125.           var myData=[{name:‘‘}];  
  126.         });  
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.           return {  
  3.             priority : -190, // run after default uiGridCell directive  
  4.             restrict : ‘A‘,  
  5.             scope : false,  
  6.   
  7.             compile: function($element, attr) {  
  8.   
  9.                 // Get the function at ng-dblclick for ui-grid  
  10.                 var fn = $parse(attr[‘ngDblclick‘], /* interceptorFn */ null, /* expensiveChecks */ true);  
  11.   
  12.                 return function ngEventHandler(scope, element) {  
  13.   
  14.                     element.on(‘dblclick‘, function(event) {  
  15.   
  16.                       var callback = function() {  
  17.   
  18.                         if ($scope.gridApi.grid.selection.lastSelectedRow)  
  19.                         {  
  20.                             fn($scope, {$event:event, row: $scope.gridApi.grid.selection.lastSelectedRow.entity });  
  21.                         }  
  22.                       };  
  23.   
  24.                       $scope.$apply(callback);  
  25.   
  26.                     }  
  27.                 )};  
  28.   
  29.             }  
  30.   
  31.             };  
  32.         } ])  
.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 使用详解

标签:string   handle   cape   nav   alt   ati   change   rest   sheet   

原文地址:http://www.cnblogs.com/freeliver54/p/6868752.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!