ui-grid是angularjs常用的表格插件,不仅可以显示表格数据,还提供了很多其他可选的操作功能。
如果想详细了解ui-gird,附上官网地址,上面也有很多详细的例子:http://ui-grid.info/
这篇重点讲一下怎样导出ui-grid表格中数据,将数据以.csv文件形式导出。
ui-grid基本用法如下:
html:
< body > < span type = "button" class = "btn btn-default" ng-click = "recoedExportAsCsv()" > 导出 </ span > < div ng-controller = "MyCtrl" > < div ui-grid = "gridOptions" style = "width: 100%; height: 426px;" ui-grid-pagination ui-grid-selection ui-grid-exporter ui-grid-resize-columns ui-grid-auto-resize class = "grid" > </ div > </ div > </ body >
js:
var app = angular.module( 'app' , [ 'ngAnimate' , 'ngTouch' , 'ui.grid' , 'ui.grid.selection' , 'ui.grid.exporter' ]); app.controller('MyCtrl' , [ '$scope' , '$http' , function ($scope, $http) { $scope.gridOptions = { columnDefs: [ { field: "serialCode" , displayName: "流水号" , }, { field: "payChannel" , displayName: "支付方式" , }, { field: "payStatus" , displayName: "状态" , } ], enableSorting: true , useExternalSorting: false , enableGridMenu: false , enableHorizontalScrollbar: 0, enableVerticalScrollbar: 0, enablePagination: true , enablePaginationControls: true , paginationPageSizes: [10], paginationCurrentPage: 1, paginationPageSize: 10, totalItems: 0, useExternalPagination: true , enableFooterTotalSelected: true , enableFullRowSelection: true , enableRowHeaderSelection: true , enableRowSelection: true , enableSelectAll: true , enableSelectionBatchEvent: true , onRegisterApi: function (gridApi){ $scope.gridApi = gridApi; } isRowSelectable: function (row) { $scope.index += 1; if ($scope.index == 1) { row.grid.api.selection.selectRow(row.entity); } }, modifierKeysToMultiSelect: true , multiSelect: true , noUnselect: false , selectionRowHeaderWidth: 30, onRegisterApi: function (gridApi) { $scope.gridApi = gridApi; gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) { $scope.index =0; $scope.gridApi.selection.on.rowSelectionChanged($scope, function (row, event) { if (row) { $scope.testRow = row.entity; $scope.isSelected = row.isSelected; } }); }, exporterCsvColumnSeparator: ',' , exporterOlderExcelCompatibility : true , exporterHeaderFilterUseName : true , exporterMenuCsv : true , exporterPdfDefaultStyle: {fontSize: 11}, }; var myData = [{ "serialCode" : "11111," payChannel ": " 营业厅 "," payStatus ":" 1"}, {"serialCode" : "22222," payChannel ": " 营业厅 "," payStatus ":" 1"}, {"serialCode" : "33333," payChannel ": " 营业厅 "," payStatus ":" 1"} {"serialCode" : "44444," payChannel ": " 营业厅 "," payStatus ":" 1"}] $scope.gridOptions.data = myData; $scope.recoedExportAsCsv = function (){ var uiGridExporterService = $scope.gridApi.exporter; uiGridExporterService.csvExport("all" , "all" ); } }]);
表格的样子是类似这样的
点击导出,便能导出一个download.csv的文件,里面便是表格中的数据。
过程就是以上这些,接下来说下重点
1.你的module中需要引入ui.grid.exporter.只引入ui.grid是不能导出任何文件的。
2.这里download.csv是系统默认的,你如果不特意设置,就是这个名字了。ui-grid中有一个可以设置.csv文件名字的属性:
exporterCsvFilename: '你想要的名字.csv' ,
把上面这个属性定义到你的$scope.gridOption里面, 就可以生效。
3.如果你的表头,或者标的内容中有中文字符,就可能会遇到中文乱码的可能。
我导出的时候就遇到这个问题,导出的文件用Notepad打开可以显示中文,用excel打开后全是乱码。这有可能是因为ui-grid不能兼容旧版本的excel.
在$scope.gridOption中设置如下属性:
exporterOlderExcelCompatibility : true ,
把属性设置成true就能解决以上乱码问题了。
4.其实ui-grid自带了导出功能,不仅可以导出.csv文件,还可以到出PDF,在菜单栏中可以选择,我的代码把菜单栏隐藏了
把这个属性设置成True菜单栏就可以显示了,在表格的右上角。大概是这个样子的
但一般情况为了用户方便操作,都是把导出功能单独写出来。
5.导出方法中有一句话:
uiGridExporterService.csvExport( "all" , "all" );
这句话的意思是把所有的行和列都导出来。这个参数也可见的VISIBLE,或者已选的SELECTED。具体这个方法怎么用可以去读源码,我也是摸索着写出来的。 源码在介里: https://github.com/angular-ui/ui-grid/blob/ac1d75e/src/features/exporter/js/exporter.js#L30 csv的导出大概这610行左右,PDF的导出大概在990行左右。