Как расширить PrimeNg TreeTable по коду

Предполагая, что у меня есть TreeTable, предоставленный PrimeNg для Angular2. Как я могу развернуть определенный узел в коде (например, в onNodeSelect Перезвоните)?

4 ответа

Решение

Я думаю, что ОП больше не нуждается в ответе, но для любого, кто достигает здесь и не находит ответа -

Есть собственность expanded за TreeNodeвсе, что вам нужно сделать, это просто установить его true

selectedNode.expanded=true;

И если вы хотите, чтобы дерево отображалось в развернутом виде, просто обойдите узлы TreeNode и установите их развернутыми. Что будет чем-то похожим на это

  expandChildren(node:TreeNode){
    if(node.children){
      node.expanded=true;
      for(let cn of node.children){
        this.expandChildren(cn);
      }
    }
  }

После выполнения кода, упомянутого Праджишем Кумаром, чтобы обновить таблицу дерева, добавьте следующую строку кода:

      this.treeNodeData = [...this.treeNodeData];

Вы можете вызвать метод expandChildren() следующим образом:

        expandTreeNodes() {
    if (this.treeNodeData) {
      this.treeNodeData.forEach(x => this.expandChildren(x));

      // Below line is important as it would refresh the TreeTable data,
      // which would force automatic update of nodes and since expanded
      // has been set to true on the expandChildren() method.

      this.treeNodeData = [...this.treeNodeData ]; 
    }
  }

Используя выше, я только что написал функцию для расширения / свертывания целых обрабатываемых узлов.

В моем шаблоне я передаю весь древовидный JSON exapandORcollapse

<button type="button" (click)="exapandORcollapse(basicTreeTable)">Collapse /Expand all</button>
 <p-treeTable [value]="basicTreeTable" selectionMode="single" [(selection)]="selectedPortfolio" (onNodeSelect)="nodeSelect($event)"
            (onNodeUnselect)="nodeUnselect($event)" (onRowDblclick)="onRowDblclick($event)" scrollable="true">

В моем файле component.ts

 exapandORcollapse(nodes) {
    for(let node of nodes) 
  { 
    if (node.children) {
        if(node.expanded == true)
          node.expanded = false;
          else
          node.expanded = true;
        for (let cn of node.children) {
            this.exapandORcollapse(node.children);
        }
    }
  }
}

Я сделал то же самое, но я клонировал тот же объект дерева себе, и это сработало.

      this.treeData.forEach((node) => {this.expandRecursive(node, true);});
this.treeData = _.cloneDeep(this.treeData);
Другие вопросы по тегам