在前端框架 Angular2 中，我们经常需要使用一些表格插件来展示数据。其中，一个非常优秀的插件就是 ng2-bs-table。它是一个基于 Bootstrap 样式的 Angular 2 表格插件，可以让我们快速地构建出具有样式感的表格。本文将详细介绍 npm 包 ng2-bs-table 的使用方法，包括安装、使用、配置以及实例代码和效果展示。
安装
在 Angular2 项目中使用 ng2-bs-table，首先需要安装该 npm 包。在终端中进入项目根目录，运行以下命令进行安装：
npm i ng2-bs-table --save
使用
引入模块
安装完成后，我们需要在 Angular2 的模块中引入该模块。首先找到你的模块文件(app.module.ts），并在其中引入：
-- -------------------- ---- -------
------ - ----------------- - ---- ------------------------------
------ - ---------------- - ---- ----------------------------
-----------
-------- -
--------------
------------
-----------
----------------- -- -- ---------------- --
--
------------- ---------------
---------- --------------
--
------ ----- --------- - -使用组件
引入成功后就可以在组件中使用 ng2-bs-table 了。下面是它的基本用法：
<ng2-table [page]="currentPage" [rows]="rows" [columns]="columns" [config]="tableConfig" [data]="data" (tableChanged)="onChangeTable($event)" ></ng2-table>
其中，[page], [rows], [columns] 和 [data] 是必填的属性：
[page]：表格当前页码；[rows]：表格每页显示的记录数；[columns]：表格的列定义；[data]：表格的数据源。
[config] 属性用于配置一些表格选项，比如是否允许排序、是否显示分页等等。tableChanged 事件用于监听表格的变动，比如翻页、排序等等。
动态修改表格数据
如果我们需要在组件中修改表格的数据，只需要在组件中定义数据源，然后动态更新即可。比如：
-- -------------------- ---- -------
------ ----- ----------- -
------ ----- -----------
------------- -
--------- - -
------ ------- ---- ----
------ ------- ---- ---
--
-
------------ -
-- ----
--------------------- ------- ---- -----
-- ----
----------------------
-
-这里使用了 ngOnInit() 方法来强制更新表格。
使用自定义模板
ng2-bs-table 插件支持使用自定义模板来渲染单元格。例如，我们可以在表格中显示一个操作按钮：
-- -------------------- ---- -------
----------
-------------------
----------------------
--------------
--------- ------------------- --------------------- ------------- ----------------------
--- ------------------------------- --------------------
--- ----------- ------ -- -------- -------------------------------- ---------------------------------- ------------------------------------------------
----------- ---------- ----------- --------------------------------------------
-----
-----------
------------这里我们使用了模板指令 ng2-smart-tbody-row 和 ng2-smart-tbody-cell 来渲染表格单元格。
配置
ng2-bs-table 提供了一些配置选项，可以通过在 [config] 属性中传递一个配置对象来进行配置。下面是一些常用的配置选项：
paging：是否显示分页。默认为true；sorting：是否允许排序。默认为true；filtering：是否允许过滤。默认为false；pageSize：每页显示的记录数。默认为10；filterDelay：过滤的延迟时间，单位为毫秒。默认为500；defaultSortDirection：默认排序方向，可以是'desc'或'asc'。
举一个例子，下面的配置选项设置了每页显示 20 条记录，并禁用了排序和分页：
tableConfig: any = {
paging: false,
sorting: false,
pageSize: 20
};示例代码
下面是一个示例代码综合了上述用法和配置，展示了一个带有分页和排序功能的表格：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------------------- - ---- ----------------------------
------ ----- ----------- ---------- ------ -
------ ----- -----------
------ -------- -----------
------ ------------ --- - -
------- -----
-------- -----
--------- --
--
------------- - -
---------- -
------------ - -
- ------ ------- ------ ------ --
- ------ ------ ------ ----- --
- ------ ---------- ------ --------- --
--
--------- - -
- ----- ------- ---- --- -------- ---- ----- --
- ----- ------- ---- --- -------- ---- -------- --
- ----- ------- ---- --- -------- --------- --
- ----- ------- ---- --- -------- --------- --
- ----- ------ ---- --- -------- -------- --
- ----- ------- ---- --- -------- ---- ---------- --
- ----- ------ ---- --- -------- --------- --
- ----- -------- ---- --- -------- -------- --
--
-
--------------------- ---- ------ -------------------- -
-- ---------
------------ - -------
-
-在 HTML 模板中，我们只需要加入以下代码来渲染表格：
<ng2-table [page]="1" [rows]="tableConfig.pageSize" [columns]="columns" [config]="tableConfig" [data]="data" (tableChanged)="onChangeTable($event, table)" ></ng2-table>
效果如下：
总结
ng2-bs-table 是一个非常优秀的 Angular2 表格插件，能够让我们快速构建出漂亮的表格。本文介绍了该插件的基本使用方法和配置选项，并提供了完整的示例代码和效果展示。如果你需要在 Angular2 项目中使用表格插件，ng2-bs-table 绝对是一个非常不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005580581e8991b448d528c