# 级联选择

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


## HTML 模板

```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)]="singleSelect" class="custom-control-input"
            id="singleSelect">
        <label class="custom-control-label" for="singleSelect">启用多选</label>
    </div>

    <div class="custom-control custom-checkbox custom-control-inline">
        <input type="checkbox" [(ngModel)]="showCheckAll" class="custom-control-input"
            id="showCheckAll"  [disabled]="!singleSelect">
        <label class="custom-control-label" for="showCheckAll">显示全选</label>
    </div>

    <div class="custom-control custom-checkbox custom-control-inline">
        <input type="checkbox" [(ngModel)]="cascadeCheck" class="custom-control-input"
            id="cascadeCheck" [disabled]="!singleSelect">
        <label class="custom-control-label" for="cascadeCheck">启用级联选择</label>
    </div>


    <div class="custom-control custom-checkbox custom-control-inline">
        <input type="checkbox" [(ngModel)]="cascadeDown" class="custom-control-input"
            id="cascadeDown" [disabled]="!cascadeCheck">
        <label class="custom-control-label" for="cascadeDown">向下级联</label>
    </div>


    <div class="custom-control custom-checkbox custom-control-inline">
        <input type="checkbox" [(ngModel)]="cascadeUp" class="custom-control-input"
            id="cascadeUp" [disabled]="!cascadeCheck">
        <label class="custom-control-label" for="cascadeUp">向上级联</label>
    </div>

    <div class="custom-control custom-checkbox custom-control-inline">
        <input type="checkbox" [(ngModel)]="checkOnSelect" class="custom-control-input"
            id="checkOnSelect" >
        <label class="custom-control-label" for="checkOnSelect">选中并钩选</label>
    </div>

    <div class="custom-control custom-checkbox custom-control-inline">
        <input type="checkbox" [(ngModel)]="selectOnCheck" class="custom-control-input"
            id="selectOnCheck" >
        <label class="custom-control-label" for="selectOnCheck">钩选并选中</label>
    </div>

    <div class="custom-control custom-checkbox custom-control-inline">
        <input type="checkbox" [(ngModel)]="onlySelectSelf" class="custom-control-input"
            id="onlySelectSelf">
        <label class="custom-control-label" for="onlySelectSelf">仅当前行选中</label>
    </div>

    <div class="custom-control custom-checkbox custom-control-inline">
        <input type="checkbox" [(ngModel)]="keepSelect" class="custom-control-input"
            id="keepSelect">
        <label class="custom-control-label" for="keepSelect" title="可在选中与非选中之间切换">保持选中</label>
    </div>

    <button class="btn btn-success ml-2 mr-1" (click)="selectNodes()"  [disabled]="!singleSelect">选中节点</button>
    <button class="btn btn-success ml-2 mr-1" (click)="getCheckedNodes()" >获取钩选数据</button>

</div>
<div class="example-wrapper">
    
    <farris-treetable #tt 
    [data]="treedata" [columns]="cols" [idField]="'name'"
    [singleSelect]="!singleSelect"
    [cascadeCheck]="cascadeCheck"
    [showCheckAll]="showCheckAll"
    [cascadeUp]="cascadeUp"
    [cascadeDown]="cascadeDown"
    [onlySelectSelf]="onlySelectSelf"
    [keepSelect]="keepSelect"
    [selectOnCheck] = "selectOnCheck"
    [checkOnSelect] = "checkOnSelect"
    [width]="800" [height]="500">
    </farris-treetable>


</div>
```

## Component.ts

```javascript
import { TreeTableComponent } from '@farris/ui-treetable';
import { Component, OnInit, ViewChild } from '@angular/core';
import { data as treeData } from '../../treetable-demo.data';
@Component({
    selector: 'demo-cascadeCheck',
    templateUrl: './demo-cascade-check.component.html'
})
export class DemoCascadeCheckComponent implements OnInit {
    treedata = treeData.data;
    cols = [];
    singleSelect = false;
    showCheckAll = true;
    cascadeCheck = false;
    cascadeDown = false;
    cascadeUp = false;

    checkOnSelect = false;
    selectOnCheck = false;
    onlySelectSelf = false;
    keepSelect = false;

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

    ngOnInit() {
        this.cols = [
            { field: 'name', title: 'Name', width: 200},
            { field: 'size', title: 'Size', width: 100 },
            { field: 'type', title: 'Type', width: 100},
            { field: 'single', title: '单身', width: 100},
            { field: 'age', title: '年龄', width: 100},
            { field: 'birthday', title: '日期', width: 100},
            { field: 'photo', title: '头像', width: 100},
            { field: 'xueli', title: '学历', width: 100}
        ];
    }

    selectNodes() {
        const nodeIDs = 'Desktop,Travel, Downloads,Expenses.doc,Documents';
        this.tt.checkedNodes(nodeIDs.split(','));
    }

    getCheckedNodes() {
        console.log(this.tt.checkeds);
    }
}

```