Ag-Grid 详细（子）网格未导出答案

【问题标题】：Ag-Grid detail (child) grids not getting exportedAg-Grid 详细（子）网格未导出
【发布时间】：2019-01-28 19:55:34
【问题描述】：

我面临的问题是从 Ag-Grid 导出网格仅导出主网格的详细信息，不导出子网格。这是一个显示问题的 plunkr：

https://next.plnkr.co/edit/jVcvWDJ1NKPSepuS

我找不到任何关于如何让子表与主表数据一起导出的文档。这甚至是 Ag-Grid 的一个功能吗？

【问题讨论】：

标签： ag-grid

【解决方案1】：

不幸的是，ag-grid 的默认行为是不导出主细节网格的细节网格。好消息：完全可以在详细网格中导出数据。坏消息：它只是有点复杂。没有像exportDetailGrids = true 这样的简单设置。这是有关如何操作的官方文档https://ag-grid.com/angular-grid/excel-export-master-detail/

我将在这里（在 Angular 中）展示如何做到这一点的基础知识，以及文档中未详细说明的奖励。您必须像这样在 HTML 中放置一个属性：

[defaultExportParams]="defaultExportParams"

然后在你的 .ts 文件中添加属性：

private defaultExportParams;

你可以在同一个文件的构造函数中定义defaultExportParams：

this.defaultExportParams = {
  getCustomContentBelowRow: function (params) {
    return [
      [
        //column header names
        cell(''),
        cell('Call Id', 'header'),
        cell('Direction', 'header'),
        cell('Number', 'header')
      ],
    ].concat(
      params.node.data.callRecords.map(function (record) {
        //values from data
        return [
          cell(''),
          cell(record.callId, 'body'),
          cell(record.direction, 'body'),
          cell(record.number, 'body')
        ];
      }),
      [[]]
    );
  },
  columnWidth: 120 //this is important
};

这里是细胞函数：

function cell(text, styleId) {
    return {
        styleId: styleId,
        data: {
            type: /^\d+$/.test(text) ? 'Number' : 'String',
            value: String(text),
        },
    };
}

如果您的详细信息网格都具有相同的列结构，那么您可以像上面显示的那样进行操作。如果您的详细网格具有不同的列结构，您可以使用决策结构（文档中未提及）：

this.defaultExportParams = {
    getCustomContentBelowRow: function (params) {
        if (params.node.data.Group == 'Detail Grid One') {
            //set column titles and data here for detail grid 1
        } else {
            //set column titles and data here for detail grid 2
        },

        columnWidth: 120
    }
};

【讨论】：

【解决方案2】：

我想可以通过为此创建自己的processCellCallback：

ag-grid export doc

params.processCellCallback = (params)=>{ 
    //here as params you will get references to api (parent grid api), columnApi, node
    //you can use node as a target and then request needed data via childApi
    ...
    return "your string result";
  };

但我不确定应该如何在 csv 文件上准确呈现子依赖项。

【讨论】：

【解决方案3】：

您可以通过 XLSX 库实现此功能。下面是我实现的代码。

让 rows = this.gridOptions.api.getSelectedNodes();

let sr_array = [[your column headers for Master Data]];
let task_array = [[your column header for Detail Data]];

rows.forEach(function (rowdata, index) {
  var sr = rowdata.data;
  sr_array.push([your master data attributes]);
  rowdata.setExpanded(true);
});

this.gridOptions.api.forEachDetailGridInfo(function (detailGridInfo) {
  detailGridInfo.api.forEachNode(function (node) {
    let task = node.data;
    task_array.push([Your detail data attributes]);
  });
});

const ws_sr: XLSX.WorkSheet = XLSX.utils.aoa_to_sheet(sr_array);
const ws_task: XLSX.WorkSheet = XLSX.utils.aoa_to_sheet(task_array);
const wb: XLSX.WorkBook = XLSX.utils.book_new();

XLSX.utils.book_append_sheet(wb, ws_sr, 'Master Data');
XLSX.utils.book_append_sheet(wb, ws_task, 'Detail Data');
XLSX.writeFile(wb, 'export.xlsx');



rows.forEach(function (rowdata, index) {
  var sr = rowdata.id;
  rowdata.setExpanded(false);
});

【讨论】：