介绍
j-ng2-table 是一个基于 Angular 4+ 的 npm 包，可以方便地在 Angular 项目中使用。它可以用于生成一个可编辑、分页、排序的 Table，同时支持多级表头，自定义过滤等功能。本文将介绍 j-ng2-table 的使用。
安装
--- ------- ----------- ------
引入
在需要使用 j-ng2-table 的模块中引入 TableModule：
------ - ----------- - ---- --------------
-----------
-------- -
------------
---
--
---
--
------ ----- -------- - -使用
使用示例
首先，通过如下代码定义列数列名：
---- - - - ------ ------- ----- ------ -- - ------ ------ ----- ----- -- - ------ --------- ----- -------- -- - ------ --------------- ----- ------ -- - ------ ------------------ ----- --------- -- --- --
其中，field 表示数据项的字段名，name 表示所对应的表头。
然后，通过如下代码定义数据：
---- - - - ----- ------- ---- --- ------- ------- -------- - ----- ---- ------ -------- ----- - -- - ----- ------ ---- --- ------- ------- -------- - ----- ---------- -------- -------- - -- - ----- ------- ---- --- ------- --------- -------- - ----- --------- -------- ---- - -- --- --
最后，在模板中使用以下代码：
------------ ------------- ----------------------------
这样就可以生成一个包含数据的 Table 了。
高级功能
可编辑
通过 editable 和 edit-row 属性，可以实现 Table 中每行可以编辑的功能。首先，定义如下方法：
-------------- ----- ---- - ----------------- -
然后，在模板中使用以下代码：
------------ ------------- ------------- ----------------- ---------------------------------------------
这样就可以使得 Table 中每行都可编辑。
分页
通过 page-size 和 total 属性，可以实现 Table 中的分页功能。首先，定义如下方法：
------------------- -------- ---- - ------------------ -
然后，在模板中使用以下代码：
------------ ------------- ------------- ---------------- --------------------- -----------------------------------------------------
这样就可以使得 Table 中分页并可进行翻页。
排序
通过 sortable 和 sort-col 属性，可以实现 Table 中的排序功能。首先，定义如下方法：
------------------- - ---- ---- ------ ------------ --- ---- - ------------------ -
然后，在模板中使用以下代码：
------------ ------------- ------------- ----------------- -----------------------------------------------------
这样就可以使得 Table 中可进行排序。
多级表头
通过 headers 和 colspan 属性，可以实现多级表头功能。首先，定义如下表头：
------- - -
-
- ----- ------- -------- - --
- ----- ------- -------- - --
- ----- --------- -------- - --
--
-
- ----- --- -------- - --
- ----- ------ -------- - --
- ----- --------- -------- - --
- ----- ------- -------- - --
- ----- ---------- -------- - --
- ----- --- -------- - --
--
--然后，在模板中使用以下代码：
------------ ------------- ------------- ----------------------------------
这样就可以使得 Table 中具有多级表头。
自定义过滤
通过 filters 属性，可以实现自定义过滤功能。首先，定义如下过滤器：
------- - -
-
------ ------
----- ------
--------- ----
------ ---
--
-
------ ---------
----- ---------
--------- ----
------ ---------
--
---
--其中，field 表示数据项的字段名，name 表示所对应的表头，operator 表示运算符，value 表示值。
然后，在模板中使用以下代码：
------------ ------------- ------------- ----------------------------------
这样就可以使得 Table 中具有自定义过滤功能。
总结
j-ng2-table 是一个方便在 Angular 项目中使用的 Table 组件，可以实现可编辑、分页、排序、多级表头、自定义过滤等功能。本文通过实际代码演示，详细介绍了 j-ng2-table 的使用，希望对读者有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600554b281e8991b448d1e87