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

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


person user4401    schedule 03.06.2016    source источник
comment
хотя не имеет отношения к treetable, может использоваться как вдохновение: stackoverflow.com/questions/38285593/   -  person Sergio    schedule 09.07.2016


Ответы (2)


Я предполагаю, что OP больше не нуждается в ответе, но для тех, кто достигает сюда и не находит ответа -

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

selectedNode.expanded=true;

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

  expandChildren(node:TreeNode){
    if(node.children){
      node.expanded=true;
      for(let cn of node.children){
        this.expandChildren(cn);
      }
    }
  }
person prajeesh kumar    schedule 20.12.2016
comment
Можно ли сделать то же самое, но сделать это выделенным? - person Baked Inhalf; 02.11.2017
comment
это только изменение: значок не разворачивает и не сворачивает таблицу - person Ahsan Sohail; 18.03.2019
comment
@AhsanSohail Ответу годы, когда угловая версия была 1.2 - person prajeesh kumar; 07.04.2019
comment
@prajeeshkumar Итак ... как я могу расширить узел дерева в 2019 году? Не могли бы вы поделиться решением? - person vladimir khozeyev; 31.10.2019
comment
@vladimirkhozeyev Некоторое время не работал с angular, обновлюсь, если сделаю - person prajeesh kumar; 12.11.2019
comment
@prajeeshkumar заранее спасибо. Я нашел только одно решение, и оно выходит за рамки концепции MVVM (найдите кнопку расширения в DOM и имитируйте щелчок мышью). - person vladimir khozeyev; 13.11.2019
comment
@vladimirkhozeyev Я использовал то же решение, но я добавил метод для обновления видимости, но он кажется чистым, потому что обновляет ui updateVisibility (): void {this.visible = false; setTimeout (() = ›(this.visible = true), 0); } - person fbm fatma; 15.04.2020
comment
Вы должны помнить об обнаружении изменений. Из-за производительности изменения обнаруживаются только тогда, когда изменяется ссылка на значение. Поэтому, если вы выполняете итерацию по своему дереву и меняете расширенный атрибут узлов в своем дереве, вам необходимо обновить ссылку, например: this.yourTreeTable = [... this.yourTreeTable]. Тогда ваш пользовательский интерфейс будет обновлен. Здесь это задокументировано в разделе [Обнаружение изменений] (primefaces.org/primeng/v9. 1,5-л / кол-во / дерево) - person Benjamin Steiner; 11.09.2020

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

В моем шаблоне я передаю весь дерево 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);
        }
    }
  }
}
person PPB    schedule 29.03.2018
comment
В моем случае полностью не работает, не показывает детей, только смена каретки - person Avtandil Kavrelishvili; 25.04.2020
comment
его только расширен до определенных уровней, а не глубоко расширен и не разрушен. - person Maulik; 07.10.2020