Как расширить 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);