bixi/packages/core/table/demo/simple-table-selectable-serverside.md

企业级中后台前端解决方案

---
title:
  zh-CN: 行可选
  en-US: 行可选
order: 141
---

## zh-CN
支持行可选。

## en-US
支持行可选。

```ts
import { Component,OnInit } from '@angular/core';
import { ICol, IRows, ISearchParams, EColType } from '@bixi/core/table';
import { HttpClient } from '@angular/common/http'; 

interface IPerson {
  name: string;
  age: number;
  id: number;
}

@Component({
  selector: 'components-table-search',
  template: `
    <bixi-table
      [rows]="rows"
      [cols]="cols"
      [loading]="loading"
      [(pagination)]="pagination"
      [(selectedKeys)]="selectedKeys"
      (search)="onSearch($event)"
    >
    </bixi-table>
  `
})
export class ComponentsTableSimpleTablePaginationComponent implements OnInit {
  loading = false;
  pagination = {
    page: 1,
    pageSize: 10,
    total: 0
  }
  
  rows: IPerson[] = [];
  cols: ICol[] = [
    {
      key: 'id',
      keyAlias: '_id',  // key 冲突时，使用 keyAlias 键
      type: EColType.checkbox,
      selectable: (_, row) => {
        return row.id !== 2;
      },
      onSelected: (row, i, val) => {
        console.log(`onSelected`, row, i, val);
      },
      selectionList: [
        {
          text: '全选当页',
          onSelect: () => {
            console.log(`全选当页`);
            this.selectedKeys = this.rows.map(r => r.id);
          }
        },
        {
          text: '全选所有',
          onSelect: () => {
            console.log(`全选所有`);
            this.selectedKeys = this.rows.map(r => r.id);
          }
        }
      ]
    },
    {
      name: 'ID',
      key: 'id'
    },
    {
      name: '姓名',
      key: 'name'
    },
    {
      name: '年龄',
      key: 'age'
    }
  ];
  selectedKeys: number[] = [];
  selectedRows: IRows[] = [];
  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.getData();
  }

  onSearch(_: ISearchParams) {
    this.getData();
  }

  onSelectedKeysChange(val: string[]) {
    console.log(`selectedKeys`, val);
  }

  onSelectedRowsChange(val: IRows[]) {
    console.log(`selectedRows`, val);
  }

  getData() {
    this.loading = true;
    const offset = (this.pagination.page - 1) * this.pagination.pageSize;
    const limit = this.pagination.pageSize;
    this.http.get<{ items: IPerson[], total: number }>(`/table?offset=${ offset }&limit=${ limit }`).subscribe(res => {
      this.rows = res.items;
      this.pagination = {
        ...this.pagination,
        total: res.total
      };
      this.loading = false;
    });
  }
}
```