1

https://angular2-tree.readme.io/docs

这棵树是通过角树节点构造的。

正在使用的自定义模板。不是自定义模板时可以使用过滤,但使用过滤器时不过滤。

在此处输入图像描述

指南有过滤功能,我的树没有过滤。

<input class="form-control f-12" id="filter2" #filter2 (keyup)="tree.treeModel.filterNodes(filter2.value)" placeholder="filter nodes"/>

<tree-root #tree [nodes]="nodes" [focused]="true">
                <ng-template #treeNodeTemplate let-node="node" let-index="index">
                  <input class="pt-1" (change)="clickCheckbox(node, $event)" type="checkbox" [indeterminate]="node.data.indeterminate" [checked]="node.data.checked">
                  <span class="pl-1" (click)="treeMembers(node.data)">{{node.data.name}}</span>
                </ng-template>
              </tree-root>

无法搜索 ng-template 中的节点。添加节点,如下所示。

public nodes: any = [];
public chart;

constructor(
private _http: HttpClient
) {
this.addNodeData();
}

addNodeData(){
this._http.get("url").subscribe(res => {
      this.chart = res;
      let node = this.addNdoeGroup(this.chart[0]);
      this.nodes.push(node);
    });
}

addNdoeGroup(Chart: any) {
let node = { id: Chart.TeamID, name: Chart.TeamName, children: [], member: []};

for (let child in Chart.Children) {
  let nChild = this.addNdoeGroup(Chart.Children[child]);
  node.children.push(nChild);
}

for (let member in Chart.Members) {
  let nMembers = this.addNodeMember(Chart, Chart.Members[member]);
  node.children.push(nMembers);
}
return node;
}

addNodeMember(Chart, member) {
let node = { id: Chart.TeamID, name: member.UserName, children: [], member: []};
return node;
}
4

0 回答 0