介绍
ng2-dynatable 是一个基于 Angular2 的插件，它提供了易于使用的数据表格功能。它支持多种数据源，包括数组、JSON 和RESTful API。它具有以下特点:
- 响应式布局
- 列过滤和排序功能
- 支持服务器端分页和查询
ng2-dynatable 可以帮助你快速构建一个功能强大的数据表格，为你的项目节省时间和精力。
安装和引用
ng2-dynatable 可以通过 npm 包安装和引用:
npm install ng2-dynatable --save
然后，在你的模块中引入 DynatableModule :
...
import {DynatableModule} from 'ng2-dynatable';
@NgModule({
imports: [..., DynatableModule],
...
})
export class AppModule { }基本用法
ng2-dynatable 的基础用法非常简单。下面是一个示例:
<db-dynatable [data]="data" [config]="config"></db-dynatable>
其中， data 是你要显示的数据源， config 是一个 DynatableConfig 对象，用来配置表格的显示和行为。
下面是一个完整的示例:
-- -------------------- ---- -------
------ ----------- ---- ----------------
------ ----------------- ---- ----------------
------------
--------- ---------
--------- -
------------- ------------- ---------------------------------
--
--
------ ----- ------------ -
------- ----- ----- - -
-
--- --
----- -------
---- ---
------ ------------------
--
-
--- --
----- -------
---- ---
------ ------------------
--
-
--- --
----- ------
---- ---
------ -----------------
-
--
------- ------- --------------- - -
--------- -
-------------- -----
------------ -----
-------- -----
---------- -----
----- ----
--
-------- -
--------------- --
--------------- --- -- ----
----------------- -
---- ----
---- ----
-
--
------ -
----------- ------ ------------- ----------- ----------------
------- --
--- -----
------ -----
--------- -----
-- -
--- -------
------ -------
--------- -----
-- -
--- ------
------ ------
--------- -----
-- -
--- --------
------ --------
--------- ------
---
-------- ----- -----
-
--
-这里定义了一个 AppComponent，它包含了一个 data 数组和一个 config 对象。注意， config 对象中的 features、display 和 table 属性可以自行配置，以满足你的需求。
进阶用法
ng2-dynatable 还支持服务器端分页和查询功能。这意味着你可以请求一个 RESTful API，并通过 ng2-dynatable 显示其结果。下面是一个示例:
-- -------------------- ---- -------
------ ----------- ---- ----------------
------ ----------------- ---- ----------------
------ ------------ ---- -----------------------
------------
--------- ---------
--------- -
------------- ------------- ---------------------------------
--
--
------ ----- ------------ -
------- ----- ------
------- ------- --------------- - -
--------- -
-------------- -----
------------ -----
-------- -----
---------- -----
----- -----
-------- -----
---------------- -----
--------------- -----
---------- -----
--
-------- -
--------------- ---
--------------- ---- --- ----
----------------- -
---- ----
---- ----
--
----------- --- ---- -- ---------
------------ --------
--
------ -
----------- ------ ------------- ----------- ----------------
------- --
--- -----
------ -----
--------- -----
-- -
--- -------
------ -------
--------- -----
-- -
--- ------
------ ------
--------- -----
-- -
--- --------
------ --------
--------- ------
---
-------- ----- ------
---------- --------
--
------- -
----------- -----
------------ ----
---------- ------------------------------
---------------- -
----- -----------
----- -------------
------ -----------
------- ---------------
------ ---------
---- -------
--
--
-------- -
--------------- ------------------------------
--------- ------------------------------
----------- ------------------------------
--------------------- -
----- -----------
----- -------------
------ -----------
------- ---------------
------ ---------
---- -------
--
--
--
------------------- ----- ----------- --
------- ----------- ---- -
--------------------------------------------------------
----- ------ ------ -- -
--------- - -----
--
---
-
-注意，这里的 data 是动态请求的结果。config 中设置的 dataIn 和 dataOut 属性是用来告诉 ng2-dynatable 如何请求和处理数据的。
总结
ng2-dynatable 提供了强大但易于使用的数据表格功能，适用于 Angular2 项目。它支持多种数据源，包括数组和 RESTful API，并提供了服务器端分页和查询功能。在使用 ng2-dynatable 时，需要按照您的需求选择不同的配置选项来满足您的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005596481e8991b448d6e0c