简体   繁体   中英

How to select all the nodes on prime angular p-tree?

I have this data on p-tree (primeng), I want to know if is possible to put all the values selected in the initial load. I was trying to put a new array on 'selectedFiles', with the the current data, the parents and children in the same level, on the array, only working with the parent node, but with the child nodes is not working.

Data:

 this.filesTree = [
    {
        "label": "Documents",
        "data": "Documents Folder",
        "expandedIcon": "fa-folder-open",
        "collapsedIcon": "fa-folder",
        "children": [{
                "label": "Work",
                "data": "Work Folder",
                "expandedIcon": "fa-folder-open",
                "collapsedIcon": "fa-folder",
                "children": [{"label": "Expenses.doc", "icon": "fa-file-word-o", "data": "Expenses Document"}, {"label": "Resume.doc", "icon": "fa-file-word-o", "data": "Resume Document"}]
            },
            {
                "label": "Home",
                "data": "Home Folder",
                "expandedIcon": "fa-folder-open",
                "collapsedIcon": "fa-folder",
                "children": [{"label": "Invoices.txt", "icon": "fa-file-word-o", "data": "Invoices for this month"}]
            }]
    }
];

Angular code:

export class TreeDemo implements OnInit {

msgs: Message[];

@ViewChild('expandingTree')
expandingTree: Tree;
selectedFile: TreeNode;
constructor(private nodeService: NodeService) { }

ngOnInit() {

  this.nodeService.getFiles().then(files => this.filesTree = files);
}

selectAll(){
 // with the parent nodes is working 
 this.selectedFiles = this.filesTree.map(
  files => {
    ... files
 })
 //this is an example of how I want to store but is not working
 this.filesTree
  .map(files => {
    this.selectedFiles = files.children
      .map( file => {
        return {
          ... file,
          parent: files
        };
    });
  });

}

Template:

<h3>Multiple Selection with Checkbox</h3>
<p-tree 
 [value]="filesTree" 
 selectionMode="checkbox" 
 [(selection)]="selectedFiles">
</p-tree>
<div>Selected Nodes: 
 <span *ngFor="let file of selectedFiles2">{file.label} </span>
</div

First, method for adding all nodes to an array

flattenTree(node : TreeNode)
{   
    this.arr.push(node);

    if (node.children) 
    {
        node.children.forEach(childNode => {
            this.flattenTree(childNode);
        } );
    }
}

Then set selectedItems = array of all nodes

test(node)
{
    this.filesTree11.forEach(node => {
        this.flattenTree(node);
    });

    this.selectedItems = this.arr; // select all nodes
}

您很可能需要编写一个递归函数来逐步遍历每个项目的子项,以将这些项目作为数据变量filesTree添加到selectedFiles变量中,尽管它是一个数组,但仅是顶级父级的数组。

<p-tree [value]="_CategoriesTree" selectionMode="checkbox" [(selection)]="_selectedNode"></p-tree>  


  selectAll() {
    this._selectedNode = [];
    this.selectAllRecursive(this._CategoriesTree);
  }


  private selectAllRecursive(tree: TreeNode[]) {
    for (const node of tree) {
      this._selectedNode.push(node);

      if (node.children) {
        this.selectAllRecursive(node.children);
      }
    }
  }

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM