# 级联选择

### [`JSON数据TreeData.json 点击查看`](assets/data/treetable-data.json)


## HTML 模板

```html
<mat-tab-group>
    <mat-tab label="预览">
        <div class="markdown">
            <h2 id="1" class="markdown-title">自定义样式、数据格式化</h2>
            <div class="row" style="margin: 0; padding: 15px; background-color: #fff">
                <div class="custom-control custom-checkbox custom-control-inline">
                    <input type="checkbox" [(ngModel)]="fixedHeader" class="custom-control-input"
                        id="fixedHeader">
                    <label class="custom-control-label" for="fixedHeader">固定表头</label>
                </div>
            </div>
            <div class="example-wrapper">
                
                <farris-treetable #tt 
                    [fixedHeader]="fixedHeader"
                    [data]="treedata" [columns]="cols" [idField]="'name'"
                    [width]="800" [height]="500"
                    [rowStyler]="myRowCls">
                </farris-treetable>


            </div>
        </div>
    </mat-tab>
 
</mat-tab-group>


```

## Component.ts

```javascript
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { data as treeData } from '../../treetable-demo.data';

@Component({
    selector: 'demo-treetable-formattor',
    templateUrl: 'demo-treetable-formattor.component.html',
    encapsulation: ViewEncapsulation.None
})
export class DemoTreetableFormattorComponent implements OnInit {
    treedata = treeData.data;
    enumData = treeData.enumdata;

    disableTree = false;
    fixedHeader = false;
    trueFalseData = [
        {label: '<span class="k-icon k-i-check" style="color: red; font-size:32px"></span>', value: true},
        {label: '<span class="k-icon k-i-close"  style="color: green; font-size:32px"></span>', value: false}
    ];
    cols = [];

    constructor() {
    }

    ngOnInit() {
        this.cols = [
            { field: 'name', title: 'Name', width: 200, styler: (v, d, i) => {
                return {
                    style: {
                        fontWeight: 'bold',
                        color: 'red'
                    }
                };
            } },
            { field: 'size', title: 'Size', width: 100 },
            { field: 'type', title: 'Type', width: 100, formatter: this.formatterData},
            { field: 'single', title: '单身', width: 100,
                formatter: {
                    type: 'boolean', options: {
                        trueText: '单身狗', falseText: '撒狗粮'
                    }
                }
            },
            { field: 'age', title: '年龄', width: 100, formatter: {
                    type: 'number',
                    options: { suffix: '岁'  }
                },
                sortable: true
            },
            { field: 'birthday', title: '日期', width: 100, formatter: { type: 'datetime', options: 'yyyy/MM/dd'} },
            { field: 'photo', title: '头像', width: 100, formatter: { type: 'image', options: {width: 80} } },
            { field: 'xueli', title: '学历', width: 100, formatter:
                {
                    type: 'enum',
                    options: {
                        data: this.enumData,
                        valueField: 'value',
                        textField: 'label'
                    }
                },
                styler: (val, data) => {
                    if (val == 1006) {
                        return  {
                            style: {
                                "background-color": 'red',
                                color: 'yellow'
                            }
                        };
                    }
                }
            }
        ];
    }

    formatterData = (v: any, d: any) => {
        return  '<img width=80 src="assets/images/face.png" onclick="alert(2)">' ;
    }

    myRowCls = (treeNode) => {
        if (treeNode.data.xueli === '1003') {
            return {
                cls: 'my-cus-tr'
            };
        }
        return '';
    }

    disableTreeTable() {
        this.disableTree = !this.disableTree;
    }


    unSelectNode(d) {
        console.log(d);
    }
}


```