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