介绍
j-ng2-table 是一个基于 Angular 4+ 的 npm 包，可以方便地在 Angular 项目中使用。它可以用于生成一个可编辑、分页、排序的 Table，同时支持多级表头，自定义过滤等功能。本文将介绍 j-ng2-table 的使用。
安装
npm install j-ng2-table --save
引入
在需要使用 j-ng2-table 的模块中引入 TableModule：
-- -------------------- ---- -------
------ - ----------- - ---- --------------
-----------
-------- -
------------
---
--
---
--
------ ----- -------- - -使用
使用示例
首先，通过如下代码定义列数列名：
cols = [
{ field: 'name', name: 'Name' },
{ field: 'age', name: 'Age' },
{ field: 'gender', name: 'Gender' },
{ field: 'address.city', name: 'City' },
{ field: 'address.country', name: 'Country' },
...
];其中，field 表示数据项的字段名，name 表示所对应的表头。
然后，通过如下代码定义数据：
data = [
{ name: 'John', age: 20, gender: 'Male', address: { city: 'New York', country: 'USA' } },
{ name: 'Tom', age: 25, gender: 'Male', address: { city: 'Toronto', country: 'Canada' } },
{ name: 'Mary', age: 30, gender: 'Female', address: { city: 'London', country: 'UK' } },
...
];最后，在模板中使用以下代码：
<j-ng2-table [cols]="cols" [data]="data"></j-ng2-table>
这样就可以生成一个包含数据的 Table 了。
高级功能
可编辑
通过 editable 和 edit-row 属性，可以实现 Table 中每行可以编辑的功能。首先，定义如下方法：
onEditRow(row: any): void {
console.log(row);
}然后，在模板中使用以下代码：
<j-ng2-table [cols]="cols" [data]="data" [editable]="true" (edit-row)="onEditRow($event)"></j-ng2-table>
这样就可以使得 Table 中每行都可编辑。
分页
通过 page-size 和 total 属性，可以实现 Table 中的分页功能。首先，定义如下方法：
onPageChanged(page: number): void {
console.log(page);
}然后，在模板中使用以下代码：
<j-ng2-table [cols]="cols" [data]="data" [page-size]="10" [total]="data.length" (page-changed)="onPageChanged($event)"></j-ng2-table>
这样就可以使得 Table 中分页并可进行翻页。
排序
通过 sortable 和 sort-col 属性，可以实现 Table 中的排序功能。首先，定义如下方法：
onSortChanged(sort: { col: any, order: 'asc'|'desc' }): void {
console.log(sort);
}然后，在模板中使用以下代码：
<j-ng2-table [cols]="cols" [data]="data" [sortable]="true" (sort-changed)="onSortChanged($event)"></j-ng2-table>
这样就可以使得 Table 中可进行排序。
多级表头
通过 headers 和 colspan 属性，可以实现多级表头功能。首先，定义如下表头：
-- -------------------- ---- -------
------- - -
-
- ----- ------- -------- - --
- ----- ------- -------- - --
- ----- --------- -------- - --
--
-
- ----- --- -------- - --
- ----- ------ -------- - --
- ----- --------- -------- - --
- ----- ------- -------- - --
- ----- ---------- -------- - --
- ----- --- -------- - --
--
--然后，在模板中使用以下代码：
<j-ng2-table [cols]="cols" [data]="data" [headers]="headers"></j-ng2-table>
这样就可以使得 Table 中具有多级表头。
自定义过滤
通过 filters 属性，可以实现自定义过滤功能。首先，定义如下过滤器：
-- -------------------- ---- -------
------- - -
-
------ ------
----- ------
--------- ----
------ ---
--
-
------ ---------
----- ---------
--------- ----
------ ---------
--
---
--其中，field 表示数据项的字段名，name 表示所对应的表头，operator 表示运算符，value 表示值。
然后，在模板中使用以下代码：
<j-ng2-table [cols]="cols" [data]="data" [filters]="filters"></j-ng2-table>
这样就可以使得 Table 中具有自定义过滤功能。
总结
j-ng2-table 是一个方便在 Angular 项目中使用的 Table 组件，可以实现可编辑、分页、排序、多级表头、自定义过滤等功能。本文通过实际代码演示，详细介绍了 j-ng2-table 的使用，希望对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600554b281e8991b448d1e87