2

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

The tree was constructed through the angular tree-node.

Custom template in use. You can use filtering when it is not a custom template, but it is not filtered when you use a filter.

enter image description here

The guide has filtering features, and my tree is not filtered.

<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>

Nodes in the ng-template cannot be searched. Add nodes as shown below.

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;
}
김세림
  • 291
  • 1
  • 5
  • 17

0 Answers0