Ag-Grid 细节(子)网格未导出

Question

我遇到一个问题，从 Ag-Grid 导出网格只会导出主网格的详细信息，而不会导出子网格。这是一个显示问题的 plunkr:

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

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

Answer 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
    }
};