如何快速扩展所有PrimeNG treeTable?

时间:2018-04-04 12:08:04

标签: angular primeng primeng-treetable

我在Angular应用中使用PrimeNG treeTable。而treeTable数据非常大。每件商品都有200多件商品。

这是它的样子:

{
    "data":
    [  
        {  
            "data":{  
                "name":"Documents",
                "size":"75kb",
                "type":"Folder"
            },
            "children":[
                {  
                    "data":{  
                        "name":"Work",
                        "size":"55kb",
                        "type":"Folder"
                    },
                    "children":[  
                        {  
                            "data":{  
                                "name":"Expenses.doc",
                                "size":"30kb",
                                "type":"Document"
                            }
                        },
                        {  
                            "data":{  
                                "name":"Resume.doc",
                                "size":"25kb",
                                "type":"Resume"
                            }
                        }
                    ]
                },
                {  
                    "data":{  
                        "name":"Home",
                        "size":"20kb",
                        "type":"Folder"
                    },
                    "children":[  
                        {  
                            "data":{  
                                "name":"Invoices",
                                "size":"20kb",
                                "type":"Text"
                            }
                        }
                    ]
                }
            ]
        },
        {  
            "data":{  
                "name":"Pictures",
                "size":"150kb",
                "type":"Folder"
            },
            "children":[  
                {  
                    "data":{  
                        "name":"barcelona.jpg",
                        "size":"90kb",
                        "type":"Picture"
                    }
                },
                {  
                    "data":{  
                        "name":"primeui.png",
                        "size":"30kb",
                        "type":"Picture"
                    }
                },
                {  
                    "data":{  
                        "name":"optimus.jpg",
                        "size":"30kb",
                        "type":"Picture"
                    }
                }
            ]
        }
    ]
}

我的功能就是这个。我想扩大所有。我用递归。 但是花了很多时间。

那么你有更好的算法吗?

 expandAll(e) {
    console.log(e);
    this.expand(e.node.children);
  }


  expand(element) {
    element.forEach(element => {
      element.expanded = true;
      this.expand(element.children);
    });
  }
}

 <p-treeTable[value]="treedataList" (onNodeExpand) = "expandAll($event)"></p-treeTable>

以下是PrimeNG treetable链接: https://www.primefaces.org/primeng/#/treetable

1 个答案:

答案 0 :(得分:0)

您可以像这样将expand作为节点项的属性添加:

{  
    "data":{  
        "name":"Home",
        "size":"20kb",
        "type":"Folder"
    },
    "children":[  
        {  
            "data":{  
                "name":"Invoices",
                "size":"20kb",
                "type":"Text"
            },
            expanded: true
        }
    ],
    expanded: true
}

树表使用以下节点接口:

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

https://www.primefaces.org/primeng/#/treetable