介绍
angular-smart-table 是一个 Angular 框架下基于 Bootstrap 样式的强大表格插件，它提供了许多有用的特性，如排序、筛选、分页、行选择、自定义模板等，能够帮助开发者快速构建数据展示页面。
安装
安装 angular-smart-table 最简单的方式是通过 npm 包管理器：
npm install angular-smart-table --save
接下来在你的 Angular 应用程序中导入 SmartTableModule 模块：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ---------------- - ---- ----------------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
---------------- -- -- ---------------- --
--
---------- ---
---------- --------------
--
------ ----- --------- - -现在，我们已经成功地将 angular-smart-table 集成到了我们的应用程序中。
使用
基本配置
下面是使用 smart-table 组件的最简单的例子，它只需要传入一个数组对象即可渲染一个基本的表格：
<smart-table [settings]="settings" [source]="data"></smart-table>
其中 settings 属性是一个配置对象，它包含了表格的一些设置，比如：
-- -------------------- ---- -------
-------- - -
-------- -
--- -
------ ----
--
----- -
------ ----- -----
--
------ -
------ -------
-
-
--上面的配置对象描述了一个包含三列的表格，每列的标题分别是 ID、Full Name 和 Email。而 data 属性则是我们要展示的数据源，它是一个数组对象。例如：
-- -------------------- ---- -------
---- - -
-
--- --
----- ----- -----
------ ----------------------
--
-
--- --
----- ----- -------
------ ------------------------
--
-- ---
--排序和筛选
angular-smart-table 提供了内置的排序和筛选功能，只需要在 settings 对象中添加相应的配置即可。
排序
为了启用排序功能，我们需要将 columns 中的某一列设置为可排序的，例如：
-- -------------------- ---- -------
-------- - -
-------- -
--- -
------ -----
------- ----- -- ----
--
----- -
------ ----- ------
----- ---- -- -----------
--
------ -
------ --------
-------------- ------ -- --------
-
-
--上面的配置将第二列 Full Name 设置为可排序的，并且默认按照升序排列，而第三列 Email 则设置为默认降序排列。当用户点击表头时，会依据相应的规则重新排序。
筛选
同样地，我们也可以启用筛选功能。只需要将 columns 中的某一列设置为可筛选的，例如：
-- -------------------- ---- -------
-------- - -
-------- -
--- -
------ -----
------- ----- -- ----
--
----- -
------ ----- ------
------- ----- -- ----
------------------ ------ ---- ------ ------ -- ---------
----------- ---------- -- ---------- ------
--
------ -
------ --------
------- -----
---------------- ------- -- ----------- ----
-
-
--上面的配置将
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/34441