# 显示图标

## 模板
```html

<div class="row" style="margin: 0; padding: 15px; background-color: #fff">
    <div class="custom-control custom-checkbox custom-control-inline">
        <input type="checkbox" [(ngModel)]="showIcon" class="custom-control-input"
            id="showIcon">
        <label class="custom-control-label" for="showIcon">显示图标</label>
    </div>

    <button class="btn btn-warning" (click)="updateTreeicon()">更换图标</button>
</div>
<div class="example-wrapper">
    
    <farris-treetable #tt 
    [data]="treeItems" [columns]="cols" [idField]="'id'"
    [showIcon]="showIcon" [fixedHeader]="true"
    (expand)="loadChildren($event)"
    [width]="800" [height]="500">
    </farris-treetable>

</div>

```

## component.ts
```javascript
import { TreeTableComponent, TreeNode } from '@farris/ui-treetable';
import { HttpClient } from '@angular/common/http';
import { Component, OnInit, ViewChild } from '@angular/core';
@Component({
    selector: 'demo-treetable-icon',
    templateUrl: 'demo-show-icon.component.html'
})

export class DemoShowIconComponent implements OnInit {
    cols = [];
    allTreeData = [];
    treeItems = [];

    showIcon = false;

    @ViewChild('tt') tt: TreeTableComponent;
    constructor(private http: HttpClient) { }

    ngOnInit() {
        this.cols = [
            {  field: 'name.dfName', title: '名称', width: 200  },
            {  field: 'code.dfCode', title: '编号', width: 100, sortable: true  },
            {  field: 'fullName', title: '全称', width: 200, sortable: true }
        ];

        this.loadTreeData();
    }

    loadTreeData() {
        this.http.get('assets/data/bigdata-city.json').subscribe((d: any) => {
            this.allTreeData = d;
            this.treeItems = this.allTreeData.filter(n => {
                return n.treeInfo.layer === 1;
            }).map(t => {
                return {
                    data: t,
                    children: [],
                    expanded: false,
                    leaf: false
                };
            });
        });
    }

    loadChildren(pNode: TreeNode) {
        const parentPath = pNode.data.treeInfo.path;
        const parentLayer = pNode.data.treeInfo.layer + 1;
        const childs = this.allTreeData
        .filter( c => c.treeInfo.layer === parentLayer && c.treeInfo.path.substr(0, parentPath.length) === parentPath)
        .map( d => {
            return {
                data: d,
                children: [],
                expanded: false
            };
        });

        this.tt.appendChildren(childs, pNode);
    }

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

```