# 数据格式化及自定义样式

```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)]="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" [cellStyler]="myCellCls">
                </farris-treetable>


            </div>
```


```javascript

import { ViewEncapsulation } from '@angular/core';
import { Component, OnInit, ViewChild } 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 = [];

    // @ViewChild('tt') tt: TreeTableComponent;

    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: 'enum', options: {
                        data: this.trueFalseData, valueField: 'value', textField: 'label'
                    }
                }
            },
            { 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'
                    }
                }
            }
        ];
    }

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

    myRowCls = (treeNode) => {
        // console.log(treeNode);
        if (treeNode.data.xueli === '1003') {
            return ['my-cus-tr']
        }
        return '';
    }

    myCellCls = (treeNode, field) => {
        // console.log(treeNode);
        if (field === 'xueli' && treeNode.data.xueli === '1004'){
            return 'my-cus-td';
        }
        return '';
    }

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


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

```