angularjs ui-grid 导出表格数据csvExport

最新推荐文章于 2024-05-09 09:55:34 发布

峰沙同行

最新推荐文章于 2024-05-09 09:55:34 发布

阅读量2k

点赞数 1

分类专栏： AngularJs 文章标签： ui-gird csvExport csv

AngularJs 专栏收录该内容

23 篇文章

订阅专栏

本文介绍如何使用UI-Grid插件导出AngularJS表格数据为CSV格式，并解决中文乱码问题。

ui-grid是angularjs常用的表格插件，不仅可以显示表格数据，还提供了很多其他可选的操作功能。

如果想详细了解ui-gird，附上官网地址，上面也有很多详细的例子：http://ui-grid.info/

这篇重点讲一下怎样导出ui-grid表格中数据，将数据以.csv文件形式导出。

ui-grid基本用法如下：

html:

[html]view plaincopy 
   
  <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:

[javascript]view plaincopy 
   
 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, //是否显示grid 菜单  
    enableHorizontalScrollbar: 0, //grid水平滚动条是否显示, 0-不显示  1-显示  
    enableVerticalScrollbar: 0, //grid垂直滚动条是否显示, 0-不显示  1-显示  
   
    //-------- 分页属性 ----------------  
    enablePagination: true, //是否分页，默认为true  
    enablePaginationControls: true, //使用默认的底部分页  
    paginationPageSizes: [10], //每页显示个数可选项  
    paginationCurrentPage: 1, //当前页码  
    paginationPageSize: 10, //每页显示个数  
    //paginationTemplate:"<div></div>", //自定义底部分页代码  
    totalItems: 0, // 总数量  
    useExternalPagination: true,//是否使用分页按钮  
   
    //----------- 选中 ----------------------  
    enableFooterTotalSelected: true, // 是否显示选中的总数，默认为true, 如果显示，showGridFooter 必须为true  
    enableFullRowSelection: true, //是否点击行任意位置后选中,默认为false,当为true时，checkbox可以显示但是不可选中  
    enableRowHeaderSelection: true, //是否显示选中checkbox框 ,默认为true  
    enableRowSelection: true, // 行选择是否可用，默认为true;  
    enableSelectAll: true, // 选择所有checkbox是否可用，默认为true;  
    enableSelectionBatchEvent: true, //默认true  
         
    onRegisterApi: function(gridApi){  
        $scope.gridApi = gridApi;  
    }  
    isRowSelectable: function (row) { //GridRow  
      $scope.index += 1;       
      if ($scope.index == 1) {  
        row.grid.api.selection.selectRow(row.entity); // 选中行  
      }  
    },  
    modifierKeysToMultiSelect: true,//默认false,为true时只能 按ctrl或shift键进行多选, multiSelect 必须为true;  
    multiSelect: true,// 是否可以选择多个,默认为true;  
    noUnselect: false,//默认false,选中后是否可以取消选中  
    selectionRowHeaderWidth: 30,//默认30 ，设置选择列的宽度；  
     //---------------api---------------------  
    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,//是否兼容低版本excel  
    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文件名字的属性：

[javascript]view plaincopy 
   
 exporterCsvFilename: '你想要的名字.csv',  

把上面这个属性定义到你的$scope.gridOption里面，就可以生效。

3.如果你的表头，或者标的内容中有中文字符，就可能会遇到中文乱码的可能。

我导出的时候就遇到这个问题，导出的文件用Notepad打开可以显示中文，用excel打开后全是乱码。这有可能是因为ui-grid不能兼容旧版本的excel.

在$scope.gridOption中设置如下属性：

[javascript]view plaincopy 
   
 exporterOlderExcelCompatibility : true,  

把属性设置成true就能解决以上乱码问题了。

4.其实ui-grid自带了导出功能，不仅可以导出.csv文件，还可以到出PDF，在菜单栏中可以选择，我的代码把菜单栏隐藏了

[javascript]view plaincopy 
   
 enableGridMenu: false, //是否显示grid 菜单  

把这个属性设置成True菜单栏就可以显示了,在表格的右上角。大概是这个样子的

但一般情况为了用户方便操作，都是把导出功能单独写出来。

5.导出方法中有一句话：

[javascript]view plaincopy 
   
 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行左右。