Question

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

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

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

Answer 1

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

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文件中应如何精确显示子依赖项。

Answer 2

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

让行= 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);
});

Answer 3

不幸的是，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
    }
};

Ag-Grid详细信息（子）网格未导出

3 个答案: