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行左右。