选定角度uigrid导出会生成空csv

时间:2016-01-04 22:20:25

标签: angularjs angular-ui-grid

我有一个包含大量列定义的uigrid,这些列定义最初没有填充数据,因为数据集太大了。相反,当列可见性发生变化时,我会收到请求的列数据。

这会导致内置csv导出器出现问题。当有人选择“将所有数据导出为csv”时,会得到许多空列。

所以我按照以下方式制作了自己的实现:

   $interval( function() {
      gridApi.core.addToGridMenu( gridApi.grid, [{
        title: 'Export All to CSV',
        order: 1,
        action: function ($event) {
          var myElement = angular.element(document.querySelectorAll(".custom-csv-link-location"));
          $scope.gridApi.exporter.csvExport( uiGridExporterConstants.ALL, uiGridExporterConstants.VISIBLE, myElement );
        }
      }]);
      gridApi.core.addToGridMenu( gridApi.grid, [{
        title: 'Export Selected to CSV',
        order: 2,
        action: function ($event) {
          if(gridApi.grid.selection.selectedCount > 0){
            var myElement = angular.element(document.querySelectorAll(".custom-csv-link-location"));
            $scope.gridApi.exporter.csvExport( uiGridExporterConstants.SELECTED, uiGridExporterConstants.VISIBLE, myElement );
          }
        }
      }]);
      gridApi.core.addToGridMenu( gridApi.grid, [{
        title: 'Export Visible to CSV',
        order: 3,
        action: function ($event) {
          var myElement = angular.element(document.querySelectorAll(".custom-csv-link-location"));
          $scope.gridApi.exporter.csvExport( uiGridExporterConstants.VISIBLE, uiGridExporterConstants.VISIBLE, myElement );
        }
      }]);
    }, 0, 1);

全部导出到CSV并导出可见到CSV按预期工作,但导出选定只创建一个只包含标题但没有数据的CSV文件。

我知道网格知道选择,下面将选择的元素返回到控制台:

       gridApi.core.addToGridMenu( gridApi.grid, [{
        title: 'Export Selected to CSV',
        order: 2,
        action: function ($event) {
          if(gridApi.grid.selection.selectedCount > 0){
            var myElement = angular.element(document.querySelectorAll(".custom-csv-link-location"));
            $scope.gridApi.exporter.csvExport( uiGridExporterConstants.SELECTED, uiGridExporterConstants.VISIBLE, myElement );
            console.log(gridApi.selection.getSelectedRows());
            gridApi.selection.getSelectedRows().forEach(function (entry) {
              console.log(entry);
              for (var e in entry){
                console.log(entry[e]);
              }
            });
          }
        }
      }]);

我想我可以使用getSelectedRows返回的数据制作我自己的CSV,但我宁愿不这样做。 uiGridExporterConstants.SELECTED坏了吗?

1 个答案:

答案 0 :(得分:0)

我使用公共API和我自己的一些黑客“修复”它:

                    gridApi.core.addToGridMenu( gridApi.grid, [{
                    title: 'Export Selected to CSV',
                    order: 2,
                    action: function ($event) {
                        if(gridApi.grid.selection.selectedCount > 0){
                            var uiExporter = uiGridExporterService;
                            var grid = $scope.gridApi.grid;
                            uiExporter.loadAllDataIfNeeded(grid, uiGridExporterConstants.ALL, uiGridExporterConstants.VISIBLE).then(function() {
                                var exportColumnHeaders = uiExporter.getColumnHeaders(grid, uiGridExporterConstants.VISIBLE);
                                var selectionData = [];
                                gridApi.selection.getSelectedRows().forEach(function (entry) {
                                    var innerData = [];
                                    for (var e in entry){
                                        if (e !== '$$hashKey') {
                                            var selectObj = {value:entry[e]};
                                            innerData.push(selectObj);
                                        }
                                    }
                                    selectionData.push(innerData);
                                });
                                var csvContent = uiExporter.formatAsCsv(exportColumnHeaders, selectionData, grid.options.exporterCsvColumnSeparator);
                                uiExporter.downloadFile($scope.gridOptions.exporterCsvFilename, csvContent, grid.options.exporterOlderExcelCompatibility);
                            });
                        }
                    }
                }]);

不是最漂亮的解决方案,但它确实有效。