# Datagrid 多选设置

### Datagrid 属性：

- **showAllCheckbox**: `boolean` 显示合选checkbox
- **selectOnCheck**: `boolean` 当钩选时，同时选中行（行背景色）
- **checkOnSelect**: `boolean` 选中行时，同时钩选checkbox
- **onlySelectSelf**: `boolean` 启用多选时，只能有一行被选中
- **showCheckbox**: `boolean` 显示checkbox
- **multiSelect**: `boolean` 启用多选
- **keepSelect**: `boolean` 保持选中，否则再次单击将取消选中行

### 事件

- **beforeSelect**: 选中前事件
- **beforeUnselect**: 取消选中前事件
- **beforeCheck**: 钩选前事件
- **beforeUncheck**: 取消钩选前事件
- **checkedChange**: 钩选变化事件

# HTML
```html
<farris-datagrid #dg
    [columns]="columns"
    [data]="items" 
    [pageSize]="50" [showBorder]="true"
    [pagination]="false"
    
    [showAllCheckbox]="showAllCheckbox"
    [selectOnCheck]="selectOnCheck"
    [checkOnSelect]="checkOnSelect"
    [onlySelectSelf]="onlySelectSelf"
    [showCheckbox]="showCheckbox"
    [multiSelect]="true"
    [keepSelect]="keepSelect"
    
    [beforeSelect]="onBeforeSelect"
    [beforeUnselect]="onBeforeUnselect"
    [beforeCheck]="onBeforeCheck"
    [beforeUncheck]="onBeforeUncheck"

    (checkedChange) = "checkedChange($event)"
    >
</farris-datagrid>
```
# Ts
```javascript

import { Component, OnInit, ViewChild } from '@angular/core';

import { DATAGRID_REST_SERVICEE, CalculationType, DatagridComponent } from '@farris/ui-datagrid';
import { DemoDataService, RECORD_COUNT } from '../../demo-data.service';
import { DemoDataSeed } from '../../demo-data-seed';
import { of } from 'rxjs';

@Component({
    selector: 'demo-multi-select',
    templateUrl: './demo-multi-select.component.html',
    providers: [
        { provide: RECORD_COUNT, useValue: 50 },
        {provide: DATAGRID_REST_SERVICEE, useClass: DemoDataService}
    ]
})
export class DemoMultiSelectComponent implements OnInit {
    columns = [];
    items;
    total = 0;
    pageSize = 100;

    @ViewChild('dg') dg: DatagridComponent;

    showAllCheckbox = true;
    showCheckbox = true;
    onlySelectSelf = true;
    keepSelect = false;
    selectOnCheck = true;
    checkOnSelect = true;

    constructor() { }

    ngOnInit(): void {

        const enumData = DemoDataSeed.enumData();
        const enumOpts = { valueField: 'value', textField: 'label', data: enumData };

        this.columns = [
            { field: 'id', width: 100, title: 'ID', footer: {
                options: { text: '合计'},
                formatter: (v, d, i) => {
                    return `<b>${v}</b>`;
                }
            }},
            { field: 'name', width: 130, title: '姓名'},
            { field: 'sex', width: 70, title: '性别' },
            { field: 'birthday', width: 120, title: '出生日期'},
            { field: 'maray', width: 70, title: '婚否', formatter: { type: 'boolean', options: { trueText: '已婚', falseText: '未婚' }}},
            { field: 'addr', width: 170, title: '地址' },
            { field: 'company', width: 100, title: '公司'},
            { field: 'nianxin', width: 70, title: '年薪', footer: {
                options: { calculationType: CalculationType.sum},
                formatter: { type: 'number', options: { prefix: '￥', suffix: '元', precision: 2 }}
            }},
            { field: 'zhiwei', width: 100, title: '职位', formatter: {type: 'enum', options: enumOpts} }
        ];

    }

    selectRow() {
        return this.dg.selectedRow;
    }

    // Before Event
    onBeforeSelect($event) {
        if ($event.rowIndex === 5) {
            return of(false);
        }
        console.log('Before Select', $event);
        return of(true);
    }

    onBeforeUnselect($event) {
        console.log('Before Unselect', $event);
        return of(true);
    }

    onBeforeCheck($event) {
        console.log('Before Check', $event);
        return of(true);
    }

    onBeforeUncheck($event) {
        console.log('Before Uncheck', $event);
        return of(true);
    }

    checkedChange($event) {
        console.log('Checkeds', $event);
    }
}

```