简介
@harmonickey/ng2-smart-table 是一个基于 Angular 框架的智能表格组件，使用 TypeScript 开发、维护并提供了大量的表格功能。
该组件可用于任何类型的数据展示，包括支持分页、排序、编辑、删除、添加、搜索、过滤等操作。同时，@harmonickey/ng2-smart-table 只需要少量的代码即可创建定制化样式的表格，使得这个组件非常适合于前端开发人员的使用。
安装
在进行 @harmonickey/ng2-smart-table 的安装之前，需要确保已经安装了 Angular CLI 和 Node.js。
使用 npm 安装 @harmonickey/ng2-smart-table：
--- ------- ---------------------------- ------
表格用法
@harmonickey/ng2-smart-table 是基于 Angular 组件定义的，其核心实现原理是将表格看成多个可排序可编辑可删除的行。
简单使用示例：
------ - --------- - ---- ----------------
------ - --------------- - ---- ------------------
------------
--------- ------------
--------- -
---------------- --------------------- ------------------------------------
-
--
------ ----- -------------- -
-------- - -
-------- -
--- -
------ ----
--
----- -
------ ----- -----
--
--------- -
------ ----- -----
--
------ -
------ -------
-
-
--
------- ----------------
------------- -
----------- - --- -----------------
-
--- --
----- ------- --------
--------- -------
------ -------------------
--
-
--- --
----- ------ --------
--------- ------------
------ -------------------
-
---
-
-从这个示例中可以看出，@harmonickey/ng2-smart-table的使用可以分成两个部分：
- 列的定义
- 行数据的设置
本示例中，列的定义使用了一个包含了所有列的对象，每个列都被定义成一个包含标题属性（title）的对象。这些列可以在表格中以任何顺序呈现，甚至是非常复杂的排列。在该示例中，所有列的标题都非常简单，只需要列名即可显现。
第二个部分是行数据设置。这个设置使用一个 JSON 对象数组来设置，其中每一个 JSON 对象是一个行数据。需要注意的是，因为该组件是智能表格组件，因此它支持多种数据源：LocalDataSource, ServerDataSource 和 CustomDataSource。同时，默认使用 LocalDataSource。
更多配置
除了上述的例子中仅仅包含了列和行数据，@harmonickey/ng2-smart-table 还提供了大量的配置项和 Api 来增加和定制该组件的表现形式。 以下是一些最常用的设置:
Options 和 Settings
这两个对象是该组件最重要的配置项之一。它们同时应用到整个表格中，并定义其外观和行为。
示例如下：
-------- - -
----------- --------- -- -----
----- ----------- -- ------- ----------------- --------
-------- -
---- -----
----- -----
------- -----
--------- --------
------------ ---------
--
------ -
-------- ---
-------- -----
-------- ----
--
-------- -
--- -
------ -----
-------------- -------
----- -------
------- ----
--
----- -
------ ----- -----
-
-
--
------- - -
----- -------- -- --- --- --- --------- ------------------ -- -------
----- -
------------------ ---------------
--
------- -
-------------------- -----------------
--
--------- ------
-------- -
--- -
------ -----
------- ----
--
----- -
------ ----- ------
------- -----
----- ------
-
-
--中间件
@harmonickey/ng2-smart-table 可以使用中间件（middleware）来增加它自己自带的功能。比如可以使用 ng2-smart-table-teaser 来提供数据可视化等样式。
至于如何引入中间件，示例代码中并没有演示出来。
Api
该组件的 table 属性可以通过组件实例的方法获得一个 Api 对象。该对象提供了一个可用于在表格中调用的一系列方法。
示例如下：
------ - ---------- --------- - ---- ----------------
------ - --------------- - ---- ------------------
------ - ------------------- - ---- ------------------
------------
--------- ------------
--------- -
---------------- --------------------- ----------------- -------------------------
-
--
------ ----- -------------- -
------------------- - ------- ---- -- ------ --------------------
-------- - -
-------- -
--- -
------ ----
--
----- -
------ ----- -----
--
--------- -
------ ----- -----
--
------ -
------ -------
-
-
--
------- ----------------
------------- -
----------- - --- -----------------
-
--- --
----- ------- --------
--------- -------
------ -------------------
--
-
--- --
----- ------ --------
--------- ------------
------ -------------------
-
---
-
------------- -
----- --- - --------------------
----------------- -- ----- --- --
-
-其中，getTableApi() 方法就是我们调用 Api 对象的示例。
总结
@harmonickey/ng2-smart-table 是一个卓越的智能表格组件，使用简单，具有广泛的适用性和定制化。它实现了许多高度可定制的功能，轻松处理了各种数据输入。
通过使用@harmonickey/ng2-smart-table，您可以轻松地创建仅仅只需要一行代码就可以完成的具有高度可定制的表单，让您的索引更加的规整和易于管理。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005754181e8991b448ea4bc