如何为PrimeNG Tree（P-Tree）组件格式化适配所需数据源

1. 格式要求确认 #

首先明确：P-Tree 组件必须使用符合官方约定结构的数据源，数据库返回的原始数据若结构不匹配，必须经过转换才能使用。
官方要求的单节点核心字段如下，你可以根据业务需要新增自定义字段：

• label：节点显示的文本
• children：子节点数组，无下级节点可省略该字段
• 可选字段：expandedIcon（展开态图标）、collapsedIcon（收起态图标）、icon（叶子节点图标）、data（挂载自定义业务数据）

标准合法结构示例如下：

{
  "label": "Pictures",
  "data": "Pictures Folder",
  "expandedIcon": "pi pi-folder-open",
  "collapsedIcon": "pi pi-folder",
  "children": [
    {"label": "barcelona.jpg", "icon": "pi pi-image", "data": "Barcelona Photo"},
    {"label": "logo.jpg", "icon": "pi pi-file", "data": "PrimeFaces Logo"},
    {"label": "primeui.png", "icon": "pi pi-image", "data": "PrimeUI Logo"}
  ]
}

2. 常见转换实现方法 #

数据库返回的树形相关数据通常分两种格式，对应不同的转换逻辑：

情况1：数据库返回平级带父子关联的结构 #

这是最常见的场景，即每条数据包含id、parentId、节点名称等字段，没有嵌套结构。可以用以下TypeScript方法转换为P-Tree要求的嵌套结构：

interface RawDbNode {
  id: number;
  parentId: number | null; // 根节点parentId为null或0
  name: string;
  // 其他业务字段
}

interface TreeNode {
  label: string;
  data?: any;
  children?: TreeNode[];
  icon?: string;
  expandedIcon?: string;
  collapsedIcon?: string;
}

// 平级转嵌套工具方法
function convertFlatToTree(rawList: RawDbNode[]): TreeNode[] {
  const nodeMap = new Map<number, TreeNode>();
  const rootNodes: TreeNode[] = [];

  // 第一步：先把所有原始数据转为基础树节点，存入map
  rawList.forEach(item => {
    nodeMap.set(item.id, {
      label: item.name,
      data: item, // 把原始业务数据挂载到data字段，方便后续使用
      children: []
    })
  })

  // 第二步：组装父子关系
  rawList.forEach(item => {
    const node = nodeMap.get(item.id)!;
    // 根节点直接加入根数组
    if (item.parentId === null || item.parentId === 0) {
      // 可以给根节点单独设置文件夹图标
      node.expandedIcon = 'pi pi-folder-open';
      node.collapsedIcon = 'pi pi-folder';
      rootNodes.push(node);
    } else {
      const parentNode = nodeMap.get(item.parentId);
      if (parentNode) {
        // 叶子节点设置文件图标
        node.icon = 'pi pi-file';
        parentNode.children?.push(node);
      }
    }
  })

  return rootNodes;
}

情况2：数据库已返回嵌套结构，仅字段名不匹配 #

如果数据已经是嵌套结构，只是字段名和P-Tree要求不一致（比如数据库返回name对应label、childList对应children），直接做递归映射即可：

function mapFieldToTree(rawNode: any): TreeNode {
  const treeNode: TreeNode = {
    label: rawNode.name,
    data: rawNode,
    children: rawNode.childList ? rawNode.childList.map((child: any) => mapFieldToTree(child)) : []
  }
  // 按需设置图标逻辑
  if (treeNode.children && treeNode.children.length > 0) {
    treeNode.expandedIcon = 'pi pi-folder-open';
    treeNode.collapsedIcon = 'pi pi-folder';
  } else {
    treeNode.icon = 'pi pi-file';
  }
  return treeNode;
}

3. Angular中实际使用示例 #

在组件中请求后端接口后调用转换方法，再赋值给P-Tree的绑定变量即可：

import { Component, OnInit } from '@angular/core';
import { TreeNode } from 'primeng/api';
import { DataService } from './data.service';

@Component({
  template: `<p-tree [value]="treeNodes"></p-tree>`
})
export class TreeDemoComponent implements OnInit {
  treeNodes: TreeNode[] = [];

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.getTreeDataFromDb().subscribe(rawData => {
      // 调用上面的转换方法处理原始数据
      this.treeNodes = convertFlatToTree(rawData);
    })
  }
}

如果你的树数据量很大，可以使用P-Tree的懒加载能力，不需要一次性转换全量数据，点击节点时再请求对应父节点的子数据，转换后插入到当前节点的children字段即可。

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