在前端开发中，数据表格是一个非常常用的组件，在实现数据表格时，我们往往需要使用到比较复杂的算法和操作，这时候，使用一些优秀的第三方库能快速提高我们的开发效率。在 Angular 2 中，@tuupertunut/angular-2-data-table 是一个非常好用的数据表格组件，本文将介绍如何使用它。
安装
首先，我们需要通过 npm 安装 @tuupertunut/angular-2-data-table：
npm i --save @tuupertunut/angular-2-data-table
然后，在你的 Angular 2 项目中引入它：
import {DataTableModule} from '@tuupertunut/angular-2-data-table';基本用法
@tuupertunut/angular-2-data-table 提供了非常简单的接口，使得我们能够非常方便地使用它来实现数据表格。接下来，我们将介绍如何使用它来实现一个简单的数据表格。
首先，在 HTML 文件中，我们需要添加如下代码：
<ngx-datatable [rows]="rows" [columns]="columns"></ngx-datatable>
其中，rows 是一个数组，包含了需要显示的数据，columns 是一个数组，包含了表格的列信息。在 TypeScript 文件中，我们需要定义 rows 和 columns，并初始化它们：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
-------------- ------------- ------------------------------------
-
--
------ ----- ------------ -
---- - -
- ----- ------- ---- --- ---- -------------
- ----- ------ ---- --- ---- ------------
- ----- ---------- ---- --- ---- ----------
--
------- - -
- ----- ------ --
- ----- ----- --
- ----- ---- ------ -
--
-有了这些代码，一个简单的数据表格就完成了。
进阶用法
除了基本用法之外，@tuupertunut/angular-2-data-table 还支持很多进阶用法。下面，我们将介绍其中两个重要的用法：分页和排序。
分页
当数据量非常大时，我们通常需要使用分页来将数据分成多页显示。@tuupertunut/angular-2-data-table 提供了非常方便的接口支持分页。
首先，我们需要在 HTML 文件中添加如下代码：
<ngx-datatable [rows]="rows" [columns]="columns" [limit]="limit" [page]="page" (pageChange)="onPageChange($event)"></ngx-datatable>
其中，limit 表示每页显示的条目数，page 表示当前页码。当用户点击分页按钮的时候，@tuupertunut/angular-2-data-table 会自动触发 pageChange 事件。
在 TypeScript 文件中，我们需要定义 limit 和 page，并在 onPageChange 回调函数中更新它们：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
-------------- ------------- ------------------- --------------- ------------- ----------------------------------------------------
-
--
------ ----- ------------ -
---- - - -- --- -- --
------- - - -- --- -- --
----- - --
---- - --
------------------- -
--------- - ------------ - --
-
-有了这些代码，分页功能就完成了。
排序
当数据需要按照某个字段排序时，我们可以使用 @tuupertunut/angular-2-data-table 提供的排序功能。
首先，在 HTML 文件中我们需要添加如下代码：
<ngx-datatable [rows]="rows" [columns]="columns" [sorts]="sorts" (sort)="onSort($event)"></ngx-datatable>
其中，sorts 是一个数组，包含了当前表格排序的信息。当用户点击表格的列头时，@tuupertunut/angular-2-data-table 会自动触发 sort 事件，我们需要在回调函数中更新 sorts。
接下来，在 TypeScript 文件中，我们需要定义 sorts 和 onSort：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
-------------- ------------- ------------------- --------------- ----------------------------------------
-
--
------ ----- ------------ -
---- - - -- --- -- --
------- - - -- --- -- --
----- - -
- ----- ------- ---- ----- -
--
------------- -
---------- - -- ----- ------------------ ---- -------------- ---
-
-有了这些代码，排序功能就完成了。
总结
@tuupertunut/angular-2-data-table 是一个非常好用的数据表格组件，它提供了丰富的接口，支持分页和排序等关键功能。本文介绍了如何使用 @tuupertunut/angular-2-data-table，在实际开发中，我们可以根据需要进行增强和扩展。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559e381e8991b448d77b4