How to expand all PrimeNG treeTable fastly?

Question

I'm using PrimeNG treeTable in my Angular app. And the treeTable data is very large. Every item has more than 200 items.

Here is what it looks like :

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

my function is this. I want to expand all . I use recursion. But it spent a lot of time.

So do you have a better algorithm？

 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>

Here is PrimeNG treetable link: https://www.primefaces.org/primeng/#/treetable

Are you really using PrimeFaces? Please read https://stackoverflow.com/help/tagging — Jasper de Vries, Apr 04 '18 at 12:14

score 0 · Answer 1 · answered Mar 08 '19 at 01:05

You can include expand as a property of node item like this:

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

Tree table uses the following node interface:

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

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

How to expand all PrimeNG treeTable fastly?

1 Answers1