使用单元格显示而不是源值从 ui-grid 导出 CSV

Question

我用 ui-grid 完成了一个 table，这个 table 有一个列的 cellFilter 定义如下：

  { field: 'company', cellFilter: 'mapCompany:row.grid.appScope.companyCatalog' }

我的 gridMenu 自定义项配置如下：

gridMenuCustomItems: [
        {
            title:'Custom Export',
            action: function ($event) {

              var exportData = uiGridExporterService.getData(this.grid, uiGridExporterConstants.ALL, uiGridExporterConstants.ALL, true);

              var csvContent = uiGridExporterService.formatAsCsv([], exportData, this.grid.options.exporterCsvColumnSeparator);

              uiGridExporterService.downloadFile (this.grid.options.exporterCsvFilename, csvContent, this.grid.options.exporterOlderExcelCompatibility);

            },
            order:0
        } 
    ]

table 显示正确，但当我尝试导出为 CSV 时，公司列导出为空值。这是我的 Plunkr.

如有任何建议，我们将不胜感激

参考资料

我做了一些研究，并根据 ui-grid Issue #4948 it works good when the Company column is filled with an static catalog. Here is a Plunkr 证明了这一点。

Answer 1

如您所述，当列中的值不是静态时会出现导出问题，因此我 forked your plunker 提供了一个解决方案，为每个数据对象创建公司映射并将其添加为键-取回公司目录后的价值：

 $http.get('https://api.github.com/users/hadley/orgs')
   .success(function(data) {

     $scope.companyCatalog = data;
     angular.forEach($scope.gridOptions.data, function(item) {
       var compMap = uiGridFactory.getMapCompany(item.company, $scope.companyCatalog);
       item.mappedCo = compMap;
     });
   });

我保留了原来的公司列，但使其不可见（而不是覆盖它），因此它与 csv 中的其余数据一起导出。新列定义：

columnDefs: [
  { field: 'name' },
  { field: 'mappedCo', name: 'Company'},
  { field: 'company', visible: false }
]

此外，在您从服务器获取数据的情况下，您必须确保在运行映射函数之前返回数据和目录。此解决方案可能不适用于您的特定用例；我不知道。

Answer 2

我找到了CSV导出的解决方案，能够显示单元格显示值。我的错误是在 mapCompany 单元格过滤器中使用 row.grid 而不是 this.grid：

columnDefs: [
  { field: 'name' },
  { field: 'company', cellFilter: 'mapCompany:row.grid.appScope.companyCatalog' }
],

正确的使用方法是使用这个：

columnDefs: [
  { field: 'name' },
  { field: 'company', cellFilter: 'mapCompany:this.grid.appScope.companyCatalog' }
],

这是我的 Plunkr.

使用单元格显示而不是源值从 ui-grid 导出 CSV

Exporting CSV from ui-grid with cell display rather than the source value

angular-ui-grid