Question

我正在使用primengtreetable使用angular2构建树。选择节点后，我想知道所选节点的“父节点”与所选节点一样。

在这种情况下，如果我单击4，我想了解有关被单击的节点（4）和父节点（Ranchi和Aamir）的数据。

可以对初始文件进行哪些更改以获得结果？

树表HTML ：

verbose = TRUE

打字稿文件：

verboseIter = TRUE

服务等级

<h3 class="first">Basic</h3>
<p-treeTable [value]="data">
  <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
    <tr>
      <td>
        <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
        <a routerLink="/overzicht-signal/details" *ngIf="!rowNode.node.children">{{ rowData[_object.keys(rowData)[0]] }}</a>
        <span *ngIf="rowNode.node.children">{{ rowData[_object.keys(rowData)[0]]}}</span>
      </td>
      <td>{{rowData.aantalPersonen}}</td>
    </tr>
  </ng-template>
</p-treeTable>

从服务类中，它以格式转换为Json消息，并以树表结构（primng）Json格式对其进行格式化，并使用IT TO HTML文件显示数据。

Answer 1

这里有一位父母的例子。（用于删除路由（例如节点））。

模板

    <p-tree [value]="routes"
            layout="horizontal"
            selectionMode="single"
            [(selection)]="selected">
    </p-tree>

    <a class="btn btn-primary"
           (click)="removeRoute(selected)">Remove Page</a>

组件

removeRoute(node) {
   const parent: any = this.findById(this.routes, node.parentId);
   const index = parent.children.findIndex(c => c.id === node.id);

   parent.children.splice(index, 1);
 }

 findById(data, id) {
   for (const node of data) {
     if (node.id === id) {
       return node;
     }

     if (node.children) {
       const desiredNode = this.findById(node.children, id);
       if (desiredNode) {
         return desiredNode;
       }
     }
   }
   return false;
 }

Answer 2

我能够得到意见。

我已经使用了Treenode的onNodeSelect api。单击节点时，我只是检查该节点是否有任何子节点。如果没有，我将使用event.node.data获取最后一个子节点数据，然后调用函数并遍历到父级并获取父级数据。

 nodeSelect(event) {
    if(!event.node.children) {
      this.signalenCodeNode = event.node.data
      this.getParentDetails(event.node)
    }
  }


  getParentDetails(node: TreeNode) {
    if(node.parent){
      this.signalenVestigingNode= node.parent.data
       if(node.parent.parent){
         this.signalenBrin= node.parent.parent.data
       }
    }
  }

HTML ：

<h3 class="first">Basic</h3>
<p-treeTable [value]="data" selectionMode="single" [(selection)]="selectedNode" (onNodeSelect)="nodeSelect($event)">
  <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
    <tr >
      <td [ttSelectableRow]="rowNode" >
        <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
        <span>{{ rowData[_object.keys(rowData)[0]] }} </span>
      </td>
      <td>{{rowData.aantalPersonen}}</td>
    </tr>
  </ng-template>
</p-treeTable>

Angular树表（Primeng树表）-获取儿童的所有父节点

2 个答案: