如何为 PrimeNG 树 (P-Tree) 组件整形数据源？

Question

我对 Angular 和 PrimeNG 组件还很陌生。我想构建一个带有子节点的树视图，PrimeNG 提供了组件开箱即用的解决方案。但是，所有示例都有硬编码数据源。在我的例子中，数据源来自数据库，我不知道我是否必须调整我的数据以匹配 P-Tree 的预期（见下文）。如果是，实现它的技术是什么？

下面是 P-Tree 的数据源示例。

{
            "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"}]
}

Answer 1

是的，因为数据必须匹配 TreeNode 接口。

export interface TreeNode {
    data?: any;
    children?: TreeNode[];
    leaf?: boolean;
    expanded?: boolean;
    label?: string;
    expandedIcon?: string:
    collapsedIcon?: string; 
}

如果你有 API，你可以这样做。


@Injectable()
export class NodeService {

    constructor(private http: Http) {}

    getFilesystem() {
        return this.http.get('showcase/resources/data/filesystem.json')
                    .toPromise()
                    .then(res => <TreeNode[]> res.json().data);
    }
}

p-treeSelect 和 p-treeTable 文档有几个很好的例子： https://www.primefaces.org/primeng/showcase/#/treeselect https://www.primefaces.org/primeng/showcase/#/treetable.

Answer 2

我的问题已经解决了。使用递归的方法构建树状层次结构，父ID为根，子代属于父代。数据 table 作为参数传递到方法中。该方法遍历整个数据 table.

          foreach (DataRow dr in dtData.Select("ParentID = '" + ID+ "'"))
            {
                // recursive
                folder.children.Add(
                    new ChildFolder()
                    {
                        label = dr["Name"].ToString(),
                        children = GetChildren(Convert.ToInt32(dr["ID"]), dtData),
                        data = Convert.ToString(dr["ID"])
                    });
            }

            return folder;

如何为 PrimeNG 树 (P-Tree) 组件整形数据源？

How to shape the data source for PrimeNG Tree (P-Tree) Component?

primeng