介绍
ng2-datatable-bootstrap4 是一个基于 Bootstrap 4 样式的 Angular 2+ 的数据表格库，使用简单方便，支持各种数据源，支持分页、排序、筛选等功能，具有较好的扩展性和性能优势。
安装
安装 ng2-datatable-bootstrap4 的方法非常简单，只需要在命令行中执行以下命令：
npm install ng2-datatable-bootstrap4 --save
使用
使用 ng2-datatable-bootstrap4 的方法也非常简单，只需要按照以下步骤进行即可：
- 在 AppModule 中引入组件：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - --------------------------- - ---- ---------------------------
-----------
-------- -
---------------------------
--
---
--
------ ----- --------- - -- 在组件中使用：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
------------------------
-------------
-------------------
----------------------
-------------------
-------------------
----------------
------------
-----------------------
-
--------------------------
-
--
------ ----- ------------ -
---- - -
-- ---
--
------- - -
-- ---
--
-- 组件参数说明：
- rows：类型为数组，表示需要展示的数据，必填参数。
- columns：类型为数组，表示数据的列定义，必填参数。
- columnMode：类型为字符串，表示列模式，默认为 'flex'，可选值为 'force'，表示强制固定列宽。
- headerHeight：类型为数字，表示表头高度，默认为 50。
- footerHeight：类型为数字，表示表尾高度，默认为 50。
- rowHeight：类型为数字，表示行高度，默认为 50。
- limit：类型为数字，表示每页展示的行数，默认为 10。
- counts：类型为数组，表示每页展示的行数的可选值，默认为 [5, 10, 20, 50]。
示例代码
以下示例代码展示了如何使用 ng2-datatable-bootstrap4：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
------------------------
-------------
-------------------
----------------------
-------------------
-------------------
----------------
------------
-----------------------
-
--------------------------
-
--
------ ----- ------------ -
---- - -
-
----- --------
---- ---
------- --------
--
-
----- ------
---- ---
------- ------
--
-
----- ----------
---- ---
------- ------
--
-
----- --------
---- ---
------- ------
--
-
----- ------
---- ---
------- --------
-
--
------- - -
-
----- -------
----- ------
--
-
----- ------
----- ------
--------- ----
--
-
----- ---------
----- ---------
----------- ----
-
--
-总结
ng2-datatable-bootstrap4 是一个基于 Bootstrap 4 样式的 Angular 2+ 的数据表格库，使用简单方便，支持各种数据源，支持分页、排序、筛选等功能，具有较好的扩展性和性能优势。本篇文章详细介绍了如何使用 ng2-datatable-bootstrap4，希望能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055a2e81e8991b448d7cfd