import { HttpClient } from '@angular/common/http'; import { Component, OnInit, ViewChild } from '@angular/core'; import { TreeTableComponent } from '@farris/ui-treetable'; @Component({ selector: 'demo-tree', templateUrl: 'demo-tree-basic.component.html' }) export class DemoTreeBasicComponent implements OnInit { treedata = []; @ViewChild('tt') tt: TreeTableComponent; showIcon = false; showLines = false; cols = [ { field: 'name.dfName', title: 'Name', width: 200} ]; constructor(private http: HttpClient) { } ngOnInit(): void { this.loadData(); } loadData() { this.http.get('assets/data/bigdata-city.json').subscribe( (d: any) => { const start = new Date().getMilliseconds(); const treeResult = this.makeTree(d); const end = new Date().getMilliseconds(); console.log(`start:${start}, end: ${end}; count: ${ end - start }`); this.treedata = treeResult; }); } private makeTree(data) { const r = data.filter(t => t.treeInfo.layer === 1).map(t => { return { data: t, children: [], expanded: false }; }); r.forEach(e => { const childs = data.filter( c => c.treeInfo.path.substr(0, 4) === e.data.treeInfo.path ); e.children = this.makeTreeChildren(childs, e.data.treeInfo); }); return r; } private makeTreeChildren(childs, treeInfo) { const pLayer = treeInfo.layer + 1; const pPathLen = treeInfo.layer * 4; return childs.filter( c => c.treeInfo.layer === pLayer && c.treeInfo.path.substr(0, pPathLen) === treeInfo.path).map( d => { return { data: d, children: this.makeTreeChildren(childs, d.treeInfo), expanded: false }; }); } updateTreeicon() { this.tt.expandIcon = 'expand-icon'; this.tt.collapseIcon = 'collapse-icon'; this.tt.leafIcon = 'leaf-icon'; this.tt.detectChanges(); } }