在前端开发中，经常会涉及到表格的展示、筛选、排序、分页等功能。而 angular-table-utils 是一个针对 Angular 框架开发的 npm 包，提供了丰富的表格功能，本文将详细介绍如何使用这个工具包。
安装
在任意 Angular 项目中安装 angular-table-utils，可以使用 npm 命令进行安装。
npm install --save angular-table-utils
使用指南
- 导入依赖并注入到模块中
import { NgModule } from '@angular/core';
import { NgTableModule } from 'angular-table-utils';
@NgModule({
imports: [ NgTableModule ]
})
export class AppModule { }- 创建表格 HTML 模板
接下来需要在 HTML 文件中创建表格的结构，插入可绑定的指令属性。
-- -------------------- ---- -------
------ -------- ---------------------- ------------ -------------- ---------------
-------
----
-----------
-----------
-----------
-----------
-----
--------
-------
--- ----------- ------ -- --------
------ ------------ -------
------ ----------- -------
------ ------------- -------
------ ---------- -------
-----
--------
--------- 创建表格配置对象
在控制器或者其他适合的组件中，需要创建表格的配置项。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------- - ---- ----------------------
------------
--------- ------------
------------ ------------------------
--
------ ----- -------------- -
------ - -
- ------ -- ----- ----- ------- ---- ---- -- --
- ------ -- ----- ----- ------- ---- ---- -- --
- ------ -- ----- ----- ------- ---- ---- -- --
- ------ -- ----- ----- ------- ---- ---- -- -
--
------------ ------------- - -
----------- --
------------ --
--------- ---
------- -------
-------------- -----
--
-- 在 HTML 模板中绑定配置项
<table ng-table [config]="tableConfig" class="table table-bordered table-striped">
- 运行测试
以上步骤完成后，就可以测试并使用表格相关的功能了。可以通过测试数据来验证功能的正确性。
功能列表
angular-table-utils 提供了许多表格相关的功能，下面分别进行介绍。
分页功能
分页是表格最基本的功能之一。要实现分页功能，需要创建分页对象，并将其引用到表格配置中。
tableConfig: NgTableConfig = {
totalPages: 1,
currentPage: 1,
pageSize: 10,
sortBy: 'name',
sortDirection: 'asc'
};在 HTML 模板中，需要添加分页指令，绑定到表格属性上。
<table ng-table [config]="tableConfig" ng-table-pager class="table table-bordered table-striped">
排序功能
排序功能可以让我们按照指定的属性对表格中的数据进行排序。
在表格配置中，需要添加 sortBy 和 sortDirection 两个属性来指定排序方式。
tableConfig: NgTableConfig = {
...
sortBy: 'name',
sortDirection: 'asc'
};在表格头部中添加 ngTable-sort 的指令属性，并指定排序的属性。
<thead>
<tr>
<th ngTable-sort="index">序号</th>
<th ngTable-sort="name">名称</th>
<th ngTable-sort="gender">性别</th>
<th ngTable-sort="age">年龄</th>
</tr>
</thead>筛选功能
通过筛选功能，可以对表格中的数据进行过滤，只展示符合要求的数据。
在 HTML 模板中，添加一个输入框，声明 ngTableFilter 指令，然后绑定到表格配置对象的 columns 属性中。
<input type="text" class="form-control" ngTableFilter [(ngModel)]="filterText" [config]="tableConfig" placeholder="请输入名称" />
在控制器中，需要添加一个变量，保存筛选条件。
filterText: string;
单选和多选
通过单选和多选的功能，可以让我们选择表格中的一个或多个数据项，并进行相应的操作。
在 HTML 模板中，定义一个复选框，声明 ngTableSelectable 指令，并设置选择的属性。
<thead>
<tr>
<th ngTable-sort="index" ngTableSelectable="index">序号</th>
<th ngTable-sort="name" ngTableSelectable="name">名称</th>
<th ngTable-sort="gender" ngTableSelectable="gender">性别</th>
<th ngTable-sort="age" ngTableSelectable="age">年龄</th>
</tr>
</thead>在控制器中，定义一个变量，用于保存当前选择的项。
selectedItems: any[];
定义一个方法，用来处理选择的事件。
onSelectedItemsChange(items: any[]) {
this.selectedItems = items;
}在模板中，监听选择事件，并调用控制器中的方法。
<table ng-table [config]="tableConfig" ngTableSelectable (ngModelChange)="onSelectedItemsChange($event)" class="table table-bordered table-striped">
示例代码
完整示例代码：
-- -------------------- ---- -------
------ ----------- -------------------- ------------- ------------------------ ---------------------- ------------------- --
------ -------- ---------------------- ----------------- ----------------------------------------------- ------------ -------------- ---------------
-------
----
--- -------------------- ---------------------------------
--- ------------------- --------------------------------
--- --------------------- ----------------------------------
--- ------------------ -------------------------------
-----
--------
-------
--- ----------- ------ -- ------ - ---------------- - ----- ---------- - - ------------------ ---------------
------ ------------ -------
------ ----------- -------
------ ------------- -------
------ ---------- -------
-----
--------
---------- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------- - ---- ----------------------
------------
--------- ------------
------------ ------------------------
--
------ ----- -------------- -
------ - -
- ------ -- ----- ----- ------- ---- ---- -- --
- ------ -- ----- ----- ------- ---- ---- -- --
- ------ -- ----- ----- ------- ---- ---- -- --
- ------ -- ----- ----- ------- ---- ---- -- -
--
------------ ------------- - -
----------- --
------------ --
--------- ---
------- -------
-------------- -----
--
----------- -------
-------------- ------
---------------------------- ------ -
------------------ - ------
-
-这是一个完整的包含分页、排序、筛选、选择等功能的表格示例。通过这个示例，可以结合工具包轻易地实现表格功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d8881e8991b448db45d