Question

我有一个用ui-grid完成的表，这个表有一个像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
        } 
    ]

表格显示正确，但是当我尝试导出为CSV时，“公司”列将以空值导出。这是我的Plunkr。

任何建议都会被提及

参考

我做了一些研究，根据ui-grid Issue #4948，当公司专栏填充了静态目录时，它的效果很好。这是一个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中的其余数据一起导出。新栏目defs：

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

2 个答案: