如何基于JSON数据在VMware Clarity分层数据网格展示根-子结构？

没问题！我来一步步帮你实现用VMware Clarity的分层数据网格展示根-子结构的JSON数据，跟着做就行～

Clarity的分层网格支持两种数据格式，你可以根据现有JSON选择适配：

嵌套children格式（最直观） #

每个父项直接包含children数组，适合天然有层级的JSON：

[
  {
    "id": 1,
    "name": "Root Item 1",
    "description": "First root-level item",
    "children": [
      {
        "id": 11,
        "name": "Child 1.1",
        "description": "Sub-item under root 1"
      },
      {
        "id": 12,
        "name": "Child 1.2",
        "description": "Another sub-item",
        "children": [
          {
            "id": 121,
            "name": "Grandchild 1.2.1",
            "description": "Deep nested item"
          }
        ]
      }
    ]
  },
  {
    "id": 2,
    "name": "Root Item 2",
    "description": "Second root-level item"
  }
]

扁平带parentId格式 #

如果你的JSON是扁平结构，只需要给每个项加parentId（根项parentId设为null）：

[
  { "id": 1, "name": "Root Item 1", "description": "First root", "parentId": null },
  { "id": 11, "name": "Child 1.1", "description": "Sub-item", "parentId": 1 },
  { "id": 12, "name": "Child 1.2", "description": "Sub-item", "parentId": 1 },
  { "id": 121, "name": "Grandchild 1.2.1", "description": "Deep sub-item", "parentId": 12 },
  { "id": 2, "name": "Root Item 2", "description": "Second root", "parentId": null }
]

Clarity主要配合Angular使用，先安装依赖：

npm install @clr/angular @clr/ui @cds/core

然后在你的AppModule里导入数据网格模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ClrDatagridModule } from '@clr/angular';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ClrDatagridModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

嵌套格式直接用 #

在组件类里定义数据接口和你的JSON数据：

import { Component } from '@angular/core';

// 定义层级数据的接口
interface HierarchicalItem {
  id: number;
  name: string;
  description: string;
  children?: HierarchicalItem[];
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 这里可以直接赋值你的JSON数据，也可以从API获取
  items: HierarchicalItem[] = [
    {
      "id": 1,
      "name": "Root Item 1",
      "description": "First root-level item",
      "children": [
        { "id": 11, "name": "Child 1.1", "description": "Sub-item under root 1" },
        {
          "id": 12,
          "name": "Child 1.2",
          "description": "Another sub-item",
          "children": [{ "id": 121, "name": "Grandchild 1.2.1", "description": "Deep nested item" }]
        }
      ]
    },
    { "id": 2, "name": "Root Item 2", "description": "Second root-level item" }
  ];
}

扁平格式转嵌套 #

如果你的JSON是扁平的，先写个工具函数转换成嵌套结构：

// 扁平转嵌套的工具函数
function flatToNested(flatItems: any[]): HierarchicalItem[] {
  const itemMap = new Map<number, HierarchicalItem>();
  const rootItems: HierarchicalItem[] = [];

  // 先把所有项存入映射表
  flatItems.forEach(item => {
    itemMap.set(item.id, { ...item, children: [] });
  });

  // 构建父子关系
  flatItems.forEach(item => {
    if (item.parentId === null) {
      rootItems.push(itemMap.get(item.id)!);
    } else {
      const parent = itemMap.get(item.parentId);
      parent?.children?.push(itemMap.get(item.id)!);
    }
  });

  return rootItems;
}

// 在组件里调用转换
// this.items = flatToNested(yourFlatJsonData);

用Clarity的分层网格指令，结合递归模板渲染层级：

<clr-datagrid>
  <!-- 定义列头 -->
  <clr-dg-column>ID</clr-dg-column>
  <clr-dg-column>Name</clr-dg-column>
  <clr-dg-column>Description</clr-dg-column>

  <!-- 递归模板：渲染单一行及其子项 -->
  <ng-template #hierarchicalRow let-item>
    <clr-dg-row 
      [clrDgItem]="item" 
      [clrDgItemExpanded]="item.children?.length > 0"
    >
      <clr-dg-cell>{{ item.id }}</clr-dg-cell>
      <clr-dg-cell>{{ item.name }}</clr-dg-cell>
      <clr-dg-cell>{{ item.description }}</clr-dg-cell>

      <!-- 如果有子项，渲染子行 -->
      <clr-dg-child *ngIf="item.children?.length > 0">
        <clr-dg-row *ngFor="let child of item.children">
          <ng-container *ngTemplateOutlet="hierarchicalRow; context: { $implicit: child }"></ng-container>
        </clr-dg-row>
      </clr-dg-child>
    </clr-dg-row>
  </ng-template>

  <!-- 渲染所有根级项 -->
  <ng-container *ngFor="let item of items">
    <ng-container *ngTemplateOutlet="hierarchicalRow; context: { $implicit: item }"></ng-container>
  </ng-container>

  <!-- 网格底部统计 -->
  <clr-dg-footer>{{ items.length }} total items</clr-dg-footer>
</clr-datagrid>

• 控制默认展开/折叠：把[clrDgItemExpanded]="item.children?.length > 0"改成绑定一个变量，比如[clrDgItemExpanded]="item.isExpanded"，在数据里添加isExpanded字段控制
• 自定义展开图标：用<clr-dg-expander>组件替换默认箭头，比如<clr-dg-expander [clrExpanded]="item.isExpanded">+</clr-dg-expander>
• 支持排序/过滤：直接添加Clarity数据网格的clrDgSort、clrDgFilter等指令即可

内容的提问来源于stack exchange，提问作者Anuj Dixit