如何使用 ag-grid 在 angular15 中使用树数据显示父子关系

Question

我正在使用 angular15 ag-grid，这里我需要将 UI 显示为父子关系，并且我有演示中所示的数据。 所以在这里，链接是 -

• ParentId为null表示是Parent,
• id 必须与 parentId 匹配，所以这里的 id 是 1 对于 John Smith 和 "parentId": "1" 对于 Jane Smith，所以 John Smith 是 Jane Smith 的父母同样的方式 "id": "2", 对于 Jane Smith 和 Mary Smith 和 Bob Smith 的 ParentId 为 2，所以他们是 Jane smith 的孩子和 John smith 的孙子

Json数据：

[
  {
    "id": "1",
    "name": "John Smith",
    "age": 30,
    "address": "123 Main St.",
    "email": "[email protected]",
    "parentId": null
  },
  {
    "id": "2",
    "name": "Jane Smith",
    "age": 25,
    "address": "456 Oak St.",
    "email": "[email protected]",
    "parentId": "1"
  },
  {
    "id": "3",
    "name": "Mary Smith",
    "age": 3,
    "address": "456 Oak St.",
    "email": "[email protected]",
    "parentId": "2"
  },
  {
    "id": "4",
    "name": "Bob Smith",
    "age": 1,
    "address": "456 Oak St.",
    "email": "[email protected]",
    "parentId": "2"
  }
]

所以在这里，层次结构进入这个流程： 约翰史密斯是第一个父母

• 简·史密斯孩子 -- Mary Smith 和 Bob Smith 是孙子 所以默认情况下 - 将显示 John Smith，单击箭头将显示 Jane Smith，单击箭头将显示 Mary 和 Bob Smith 以及地址。

HTML:

<ag-grid-angular style="width: 100%; height: 80%;" class="ag-theme-alpine" [columnDefs]="columnDefs"
[defaultColDef]="defaultColDef" [autoGroupColumnDef]="autoGroupColumnDef" [rowData]="rowData"
[rowSelection]="rowSelection" [treeData]="true" [animateRows]="true" [getDataPath]="getDataPath"
(gridReady)="onGridReady($event)" [headerHeight]="0" (selectionChanged)="onSelectionChanged($event)"></ag-grid-angular>

TS:

 public columnDefs: ColDef[] = [
    { field: 'address', minWidth: 400 },
    { field: 'businessModels', minWidth: 300 },
    { field: 'accessLevelStatus', minWidth: 100 },
  ];

  public defaultColDef: ColDef = {
    flex: 1,
  };
  public autoGroupColumnDef = (ColDef = {
    headerName: 'Organisation Hierarchy',
    minWidth: 300,
    cellStyle: function (params) {
      return { color: '#922269' };
    },
    cellRendererParams: {
      checkbox: false,
      suppressCount: true,
    },
  });

  public rowData = [
    {
      id: '1',
      name: 'John Smith',
      age: 30,
      address: '123 Main St.',
      email: '[email protected]',
      parentId: null,
    },
    {
      id: '2',
      name: 'Jane Smith',
      age: 25,
      address: '456 Oak St.',
      email: '[email protected]',
      parentId: '1',
    },
    {
      id: '3',
      name: 'Mary Smith',
      age: 3,
      address: '789 Oak St.',
      email: '[email protected]',
      parentId: '2',
    },
    {
      id: '4',
      name: 'Bob Smith',
      age: 1,
      address: '122 Oak St.',
      email: '[email protected]',
      parentId: '2',
    },
  ];

  constructor() {
    this.rowSelection = 'multiple';
  }
  
  onCellClicked(params) {
    params.node.setSelected(true, true);
  }


}

预期的 Json：

[
 {
       "orgHierarchy": [
          "John Smith"
       ],
       "address": "123 main St.",
       "businessModels": "Dispenser,Distributor",
       "accessLevelStatus": "Owner"
    },
    {
       "orgHierarchy": [
          "John Smith",
          "Jane Smith"
       ],
       "address": "456 Oak St.",
       "businessModels": "Dispenser,Distributor",
       "accessLevelStatus":"Owner"
    },
     {
        "orgHierarchy": [
           "John Smith",
           "Jane Smith",
           "Mary Smith"
        ],
        "address": "456 Oak St.",
        "businessModels": "Dispenser,Distributor",
        "accessLevelStatus": "Owner"
     },
    {
       "orgHierarchy": [
          "John Smith",
          "Jane Smith",
          "Bob Smith"
       ],
       "address": "456 Oak St.",
       "businessModels": "Dispenser,Distributor",
       "accessLevelStatus": "Owner"
    },
]

演示