在Angular项目中使用AG Grid展示带层级关联的树形结构数据

你提供的带parentId关联的扁平数据结构可以直接通过AG Grid的内置树形数据配置实现渲染，无需提前转换为嵌套children结构，具体实现步骤如下：

1. 依赖安装 #

如果项目中还未引入AG Grid相关依赖，执行以下命令安装：

npm install ag-grid-angular ag-grid-community

安装完成后在angular.json中引入AG Grid基础样式与主题样式：

{
  "projects": {
    "你的项目名": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/ag-grid-community/styles/ag-grid.css",
              "node_modules/ag-grid-community/styles/ag-theme-alpine.css",
              "src/styles.css"
            ]
          }
        }
      }
    }
  }
}

2. 组件TS文件配置 #

在对应业务组件中配置AG Grid参数、列定义与数据映射：

import { Component } from '@angular/core';
import { ColDef, GridOptions } from 'ag-grid-community';
// 记得在对应模块中引入AgGridAngular模块

@Component({
  selector: 'app-tree-grid-demo',
  templateUrl: './tree-grid-demo.component.html'
})
export class TreeGridDemoComponent {
  // 列定义，可按需扩展需要展示的字段
  public columnDefs: ColDef[] = [
    { field: 'id', headerName: '节点ID', width: 100 }
  ];

  public gridOptions: GridOptions = {
    // 开启树形数据模式
    treeData: true,
    // 构造节点层级路径，AG Grid依据该路径判断父子关系
    getDataPath: (data: any) => {
      const path = [];
      let currentNode = data;
      // 向上遍历所有父节点拼接层级路径
      while (currentNode) {
        path.unshift(currentNode.name);
        currentNode = this.nodeIdMap.get(currentNode.parentId);
      }
      return path;
    },
    // 树形列配置
    autoGroupColumnDef: {
      headerName: '节点名称',
      field: 'name',
      cellRendererParams: {
        suppressCount: true // 关闭默认子节点数量统计，不需要可删除
      }
    },
    // 配置默认展开层级，-1代表默认展开所有层级
    groupDefaultExpanded: -1,
  };

  // 你的原始扁平结构数据
  public rowData: any[] = [
    { "id": "1", "name": "root", parentId:""},
    { "id": "2", "name": "child1", parentId:"1"},
    { "id": "3", "name": "child2", parentId:"2"},
    { "id": "4", "name": "child3", parentId:"2"}
    // 剩余数据补充即可
  ];

  // 节点ID映射表，用于快速查找父节点
  private nodeIdMap = new Map<string, any>();

  constructor() {
    // 初始化ID映射表
    this.rowData.forEach(node => {
      this.nodeIdMap.set(node.id, node);
    });
  }
}

注意需要在对应业务模块的imports数组中引入AgGridAngular模块。

3. 组件模板配置 #

在html模板中引入AG Grid组件：

<ag-grid-angular
  style="width: 100%; height: 600px;"
  class="ag-theme-alpine"
  [columnDefs]="columnDefs"
  [gridOptions]="gridOptions"
  [rowData]="rowData"
>
</ag-grid-angular>

常见调整项 #

• 如果根节点的parentId为null而非空字符串，无需额外修改代码，遍历逻辑会自动终止
• 如果需要控制默认展开层级，将groupDefaultExpanded修改为对应数值即可，例如设置为1代表默认仅展开一级根节点
• 需要新增展示字段直接在columnDefs数组中追加对应配置即可

内容的提问来源于stack exchange，提问作者Nikhil More