简介
ng2-table-variety 是一个基于 Angular2 以及 bootstrap3 的基础上的一款表格插件。它非常适合需要快速创建复杂表格的应用程序，能够轻松地显示和排序大量数据，同时具备强大的客户端筛选功能和高度可自定义的视图。
安装
要使用 ng2-table-variety，您首先需要安装它。您可以使用 npm 进行安装，它是一个节点包管理器，可以帮助您轻松安装其他软件包。
您可以通过以下命令进行安装:
npm install ng2-table-variety --save
使用
使用 ng2-table-variety 的方法非常简单。您只需要添加依赖项并导入组件，然后使用组件即可。
添加依赖项
首先，在 app.module.ts 中添加以下语句：
-- -------------------- ---- -------
------ - --------------------- - ---- --------------------
-----------
---
-------- -
---
--------------------------------
---
--
---
--
------ ----- --------- - -导入组件
在您想要使用组件的地方导入：
-- -------------------- ---- -------
------ - -------------- - ---- --------------------
------------
--------- ---------------
--------- -
------------------ --------------
----------- --------- ------------------------
----------- ----------- --------------------------
----------- ---------- -------------------------
--------------------
-
--
------ ----- ---------------- -
----- ----- - -
---- -- ----- ------- ---- ----
---
-
-高级使用
ng2-table-variety 可以轻松自定义视图，以适应您的应用程序。它支持自定义标题，分页和排序，甚至可以添加自定义按钮。
自定义标题
要自定义标题，请添加以下代码：
<ng2-table-variety> <ng2-title>My Table</ng2-title> ... </ng2-table-variety>
分页
要添加分页，请添加以下代码：
<ng2-table-variety [pageSize]="10"> ... </ng2-table-variety>
您可以将 pageSize 设置为任何数字，以设置每页显示的记录数。
排序
要添加排序，请添加以下代码：
<ng2-table-variety [sortField]="'id'" [sortDirection]="'asc'"> ... </ng2-table-variety>
sortField 是您要排序的对象的字段，sortDirection 是您要采用的排序方向。
自定义按钮
要添加自定义按钮，请添加以下代码：
<ng2-table-variety> <ng2-button class="btn btn-success" (click)="onAdd()">Add</ng2-button> ... </ng2-table-variety>
示例代码
-- -------------------- ---- -------
------------------ --------------- ------------- ------------------ ------------------------
------------- -----------------
----------- --------- ------------------------
----------- ----------- --------------------------
----------- ---------- -------------------------
----------- -------------- ---------
----------- ---------- --------- ------------------------------------
------
----------- ---------- ----------- ----------------------------------------
-------------
----------- ---------- ------------ ----------------------------------
---------------------- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- ---------------
--------- -
------------------ --------------- ------------- ------------------ ------------------------
------------- -----------------
----------- --------- ------------------------
----------- ----------- --------------------------
----------- ---------- -------------------------
----------- -------------- ---------
----------- ---------- --------- ------------------------------------
------
----------- ---------- ----------- ----------------------------------------
-------------
----------- ---------- ------------ ----------------------------------
--------------------
-
--
------ ----- ---------------- -
----- ----- - -
---- -- ----- ------- ---- ----
---- -- ----- ------ ---- ----
---
--
------- -
-- --- ---- ---- -- ------ --- -----
-
-------- -
-- --- ---- ---- -- ------ ---- -----
-
---------- -
-- --- ---- ---- -- ------ ------ -----
-
-总结
ng2-table-variety 是一个简单而强大的 Angular2 插件，可以帮助您更轻松地处理表格。它是可自定义的，可以轻松显示大量数据，支持客户端分页和排序，甚至可以添加自定义按钮。希望这篇指南能够帮助您开始使用 ng2-table-variety，如果您需要更多深入的信息和帮助，请查看它的官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005674f81e8991b448e3cdf