# 大数据量加载

`virtualized` 启用虚拟渲染，优化前端大数据时的渲染速度。

```html
<farris-treetable #tt [data]="treedata"
    [virtualized]="true" [width]="1000" [height]="600"
    [findField]="'name.dfName'"
    [enableFindText]="true"
    [columns]="cols" [idField]="'id'" [fixedHeader]="true" [showHeader]="true" [remoteSort]="false" [multiSort]="true">
</farris-treetable>

```

```javascript

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
    selector: 'virtual-load-demo',
    templateUrl: './demo-large-data.component.html',
})
export class DemoLargeDataComponent implements OnInit {
    expandAll = false;
    cols = [
        {  field: 'name.dfName', title: '名称', width: 200  },
        {  field: 'code.dfCode', title: '编号', width: 100, sortable: true  },
        {  field: 'fullName', title: '全称', width: 200, sortable: true },
        {  field: 'countryOrRegion.countryOrRegion.countryOrRegion_Name.dfName', title: '国家', width: 100  },
        {  field: 'countryOrRegion.countryOrRegion.countryOrRegion', title: '国家ID', width: 200  }
    ];

    treedata = [];


    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: this.expandAll
            };
        });

        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: this.expandAll
            };
        });
    }
}

```