angularjs之ui-grid 使用详解

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

html:

[html]  view plain  copy

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 自定义设置样式-->  

js:

[javascript]  view plain  copy

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.         });  

用到的自定义指令：

[javascript]  view plain  copy

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.         } ])  

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