# Tree 应用示例

## `npm i @farris/ui-treetable@latest`


```html
<farris-treetable #tt
    [columns]="cols"
    [showBorder]="false" [showHeader]="false"
    [data]="treedata"
    [fit] ="true"
    [idField]="'id'"
    [singleSelect]="false"
    [showCheckbox]="true"
    [showIcon]="showIcon"
    [disabled]="false"
    [checkOnSelect]="true">
</farris-treetable>

```

```javascript
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;
    constructor(private http: HttpClient) { }

    cols = [
        { field: 'name.dfName', title: 'Name', width: 200}
    ];

    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();
    }
}


```