如何在 ag-grid 中显示复杂的数据结构 Angular

Question

我想在 ag-grid 中显示我的数据，但我不确定如何创建我的网格。我可以分组我的演员吗？或者我可以将电影或奖项分组吗？任何帮助将不胜感激！

 "rows": [
      {
        "actorId": "22",
        "firstName": "Gwyneth",
        "lastName": "Paltrow",
        "films": [
          {
            "name": "Iron Man"
          },
          {
            "name": "Avengers: Infinity War"
          }
        ],
        "awards": [
          {
            "name": "Oscar", 
            "year": "1999"
          },
          {
            "name": "Golden Globe Award",
            "year": "1999"
          }
        ]
      },...

Answer 1

听起来您想使用 master-detail（企业功能）。

如果是这样，请像这样设置您的 columnDefs：

  columnDefs = [
    { field: 'actorId', cellRenderer: 'agGroupCellRenderer' },
    { field: 'firstName' },
    { field: 'lastName' },
  ];

创建您的 detailCellRendererParams:

  detailCellRendererParams: any = {
    detailGridOptions: {
      columnDefs: [{ field: 'name' }, { field: 'year' }],
      defaultColDef: {
        flex: 1,
      },
    },
    getDetailRowData: function (params) {
      // change this to params.successCallback(params.data.films); instead to see the films in the detail
      params.successCallback(params.data.awards);
    },
  };

并将其传递到 html 中的网格，同时启用主详细信息：

<ag-grid-angular 
    style="width: 500px; height: 500px;" 
    class="ag-theme-balham"
    [rowData]="rowData" 
    [columnDefs]="columnDefs"
    [modules]="modules"
    (gridReady)="onGridReady($event)"
    [detailCellRendererParams]="detailCellRendererParams"
    [masterDetail]="true"
    >

</ag-grid-angular>

Demo