基于ng2的智能表自定义操作

在Angular2中，可以通过内置的表格组件（如<table>）来构建基本的数据表格，但如果需要实现更加复杂的自定义功能，例如批量操作、筛选、排序、分页等，就需要使用一些第三方的库来实现。

其中一个非常流行的库是ngx-datatable，它提供了一些非常有用和灵活的功能，如自定义列、模糊搜索、导出数据等。

安装

可以通过npm来安装ngx-datatable：

npm install @swimlane/ngx-datatable

同时需要安装一些相关依赖：

npm install @angular/animations @angular/cdk @angular/material

然后在app.module.ts中导入ngx-datatable：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';

import { NgxDatatableModule } from '@swimlane/ngx-datatable';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatTableModule,
    MatPaginatorModule,
    MatSortModule,
    NgxDatatableModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

表格设置

在组件中，可以使用<ngx-datatable>标签来创建表格。在表格中，需要指定[rows]属性和[columns]属性来定义表格的数据和列信息。

<ngx-datatable class="material"
               [rows]="rows"
               [columns]="columns"
               [columnMode]="'force'"
               [headerHeight]="50"
               [footerHeight]="50"
               [rowHeight]="'auto'"
               [limit]="10"
               [reorderable]="true"
               [sortType]="'multi'"
               [externalSorting]="true"
               (sort)="onSort($event)">
</ngx-datatable>

其中，[rows]属性是一个数组，表示表格中的所有数据行。[columns]属性是一个数组，表示表格中的所有列。在这个例子中，rows和columns都是从组件中读取的数据（在后面的章节中介绍）。

[columnMode]属性定义了列的选择模式，可以为standard、flex或force。[headerHeight]、[footerHeight]和[rowHeight]属性分别表示表格头、尾和每行的高度。[limit]属性表示一页显示的数据条数，[reorderable]属性表示是否允许拖拽列来重新排列顺序。

[sortType]属性表示排序类型，可以为single或multi。[externalSorting]属性表示是否使用外部排序。当需要排序时，表格将触发(sort)事件，并将排序细节作为事件数据传递。

编辑和选中

为了能够编辑和选中单元格，需要在列定义中指定一些属性。例如，在以下代码中，我们为表格中的每行添加了一个复选框，来选择多行数据：

<ngx-datatable>
  <ngx-datatable-column
    [checkboxable]="true"
    [headerCheckboxable]="true"
    [width]="30">
  </ngx-datatable-column>

  <ngx-datatable-column
    name="Name"
    prop="name">
  </ngx-datatable-column>

  <ngx-datatable-column
    name="Age"
    prop="age">
  </ngx-datatable-column>
</ngx-datatable>

在这个例子中，第一列包含复选框，第二和第三列显示名称和年龄。为了允许编辑单元格，需要在列定义中指定[editable]属性，并为每个单元格提供一个<ngx-datatable-cell-editor>元素：

<ngx-datatable>
  <ngx-datatable-column
    [editable]="true"
    [prop]="'name'">
    <ng-template let-row="row" let-value="value">
      <ngx-datatable-cell-edit-template>
        <input [(ngModel)]="value"
               [ngModelOptions]="{standalone: true}"
               (blur)="onSave($event, row)">
      </ngx-datatable-cell-edit-template>
      <ngx-datatable-cell-view-template>
        {{value}}
      </ngx-datatable-cell-view-template>
    </ng-template>
  </ngx-datatable-column>

  <ngx-datatable-column
    [editable]="true"
    [prop]="'age'">
    <ng-template let-row="row" let-value="value">
      <ngx-datatable-cell-edit-template>
        <input [(ngModel)]="value"
               [ngModelOptions]="{standalone: true}"
               (blur)="onSave($event, row)">
      </ngx-datatable-cell-edit-template>
      <ngx-datatable-cell-view-template>
        {{value}}
      </ngx-datatable-cell-view-template>
    </ng-template>
  </ngx-datatable-column>
</ngx-datatable>

在这个例子中，我们为每个单元格提供了一个标准的输入框。当用户编辑单元格时，可以触发(blur)事件来保存修改。

筛选

为了使表格支持筛选功能，需要向列定义中添加一些属性。例如：

<ngx-datatable-column
  name="Gender"
  prop="gender"
  [filterable]="true"
  [fuzzyFilter]="true">
</ngx-datatable-column>

在这个例子中，我们为Gender列定义了筛选器，并启用了模糊筛选功能。为了在UI中显示筛选器，可以使用以下代码添加一个文本框：

<ngx-datatable-filter-wrapper>
  <input
    placeholder="Search..."
    (keyup)="search($event.target.value)">
</ngx-datatable-filter-wrapper>

排序

为了让表格支持排序功能，需要将[externalSorting]属性设置为true，并在(sort)事件中实现排序逻辑。例如：

<ngx-datatable
  [externalSorting]="true"
  (sort)="onSort($event)">
</ngx-datatable>

在表格中发生排序操作时，会触发(sort)事件，并将排序细节传递给onSort()方法。例如：

onSort(event: SortEvent) {
  // update the rows
  this.rows = this.sortRows(this.rows, event.sorts);

  // update the columns
  this.columns = this.columns.map(col => {
    col._sort = event.sorts.find(s => s.prop === col.prop);
    return col;
  });

  // scroll to the top
  this.table.offset = 0;
}

在onSort()方法中，我们可以对rows数组进行排序，并更新columns数组中与排序相关的列。注意，table.offset属性可以用来将滚动位置重置为顶部。

批量操作

为了在表格中支持批量操作功能（如删除多个行），需要添加一个控制面板，以便用户可以选择多个行。例如：

<div class="toolbar">
  <span class="select-count">{{selected.length}} selected</span>
  <button mat-icon-button
          [disabled]="!selected.length"
          (click)="deleteRows()">
    <mat-icon>delete</mat-icon>
  </button>
</div>

在这个例子中，selected数组表示用户当前选择的所有行。当用户单击“删除”按钮时，将删除所有选定的行：

deleteRows() {
  this.rows = this.rows.filter(row => !this.selected.includes(row));
  this.selected = [];
}

总结

ngx-datatable是一个非常强大的Angular2表格库，可以帮助我们构建具有高级特性的数据表格。除了上面介绍的功能之外，它还提供了许多其他功能，如分页、导出、导入、打印等。如果您需要实现一个功能丰富的数据表格，那么ngx-datatable是您的首选。