简介
angular2-serverpagination-datatable-fixed 是一个基于 Angular2 的前端组件，它实现了一个可进行服务器端分页和过滤的数据表格。该组件依赖于 ngx-pagination 和 ng2-table，并自定义了一些修复和功能。通过使用这个组件，我们可以快速方便地在 Web 应用程序中创建一个高级的数据表格。
安装
该组件已经发布到了 npm 上，因此安装非常简单。在你的 Angular2 项目中执行以下命令：
npm install --save angular2-serverpagination-datatable-fixed
接下来，在你的 Angular2 模块文件中添加以下导入语句：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ----------- - ---- -----------------
------ - -------------- - ---- ----------------------
------ - ---------------- - ---- -----------------
------ - ---------------------------------- - ---- --------------------------------------------
-----------
-------- -
-------------
------------
---------------
--------------------------
--
------------- -
----------------------------------
--
-------- -
----------------------------------
-
--
------ ----- -------- - -这个例子导入了所有必要的依赖并将 ServerpaginationDatatableComponent 添加到模块的声明和导出列表中。
使用
现在，你已经将该组件添加到了你的 Angular2 项目中。下面是如何使用它的一些简单示例。首先，假设已经创建了一个包含数据的主组件：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- ---------
--------- -
--------------------------- ----------------
------ --------------
-------
----
-----------
-------------
------------
-----
--------
-------
--- ----------- ---- -- --------
--------------------
----------------------
---------------------
-----
--------
--------
-----------------------------
-
--
------ ----- ------------ -
------ ------- ----- - -
- --- -- ----- ------- ---- -- --
- --- -- ----- ------- ---- -- --
- --- -- ----- ------ ---- -- --
- --- -- ----- ------- ---- -- --
- --- -- ----- ------- ---- -- --
- --- -- ----- ------ ---- -- --
- --- -- ----- ------- ---- -- --
- --- -- ----- -------- ---- -- --
- --- -- ----- ------- ---- -- --
- --- --- ----- ------- ---- -- -
--
-这里使用了一个基本的数据表格来显示数据。现在，我们将在组件模板中使用 ServerpaginationDatatableComponent 并将数据注入到其 data 属性中。
你会注意到，ServerpaginationDatatableComponent 会自动配置 ngx-pagination 和 ng2-table。如果需要自定义样式和配置，可以在上述导入语句中查看 ngx-pagination 和 ng2-table 的文档。
参数
ServerpaginationDatatableComponent 可以接收以下参数：
| 参数名称 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| data | any[] | 要显示的数据数组。如果需要在数据发生变化后更新视图，将数据分配给一个新数组。 | null |
| columns | TableColumn[] | 表格列的数组。每个 TableColumn 元素应该包含一个名称和一个属性。属性是指作为该列数据源的对象中的属性名称。请参考以下示例：[{ name: 'Id', prop: 'id' }, { name: 'Name', prop: 'name' }]。 | [] |
| config | any | 包含 ngx-pagination 和 ng2-table 配置的对象。 | {} |
示例
在这个例子中，我们将使用 GitHub 上的示例数据来演示 ServerpaginationDatatableComponent 的功能。我们还将添加服务器端分页和排序的支持。
首先，在模板中添加 ServerpaginationDatatableComponent 的使用，然后在组件中定义一个 data 数组：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---- - ---- ----------------
------------
--------- ---------
--------- -
----- --------------------
---- -------------------
----------------------
------ ----------- --------------------
------------------------
-------------------
------
-------
----
---------------------------
-------------
-------------------
------------------
-----------------------------
-
--
------ ----- ------------ -
------ ----- ----- - ---
------ -------- ----- - -
- ----- ------- ----- ------ --
- ----- ----------- ----- ---------- --
- ----- ----------- ----- ---------------- -
--
------ ------- --- - -
------- -----
-------- - -------- ------------ --
---------- - ------------- --- ----------- ------ -
--
------- ---- ------ - --------------------------------------------
------- ----- ----- - ---
------- ----------- ------ - ---
------------------- ----- ----- -
---------------
-
------ ---------- ---- -
-----------------------
-------------- -- -
--------- - -----------
--------------------------------
---
-
------ --------- ---- -
--- -------- ----- - ---
-- ----------------------- --- --- -
------- - ----------
- ---- -
------- - ----------------------- ---- -- -
------ -------------------------------------------------------------- --- --
-- ------------------------------------------------------------------ --- ---
---
-
---------------------------------- - ----------------
--------------------------------
-
------ --------------------- ---- ----- --- - - ----- ------------------------ ------------- ------------------------ --- ---- -
-- ------------------ -
------------------------------------ ------------------
-
-- ---------------- -
---------------------------------- ----------------
-
--- ------------ - ---------------------------- -------------
--- ---------- - ----------------------------- -------------
--------- - --------------------------- ------------ ------
-
------ ------------------ ---- ------- ----- --- -
--- ------------- ----- - -----
-- ------------------ -
------------ - ------------------ ---- -- -
------ ---------------------------------------------------------------------------------------------------- --- ---
---
-
------ -------------
-
------ ---------------- ---- ------- ----- --- -
-- ----------------- -
------ -----
-
--- ------- - --------------------------- -- ---
--- --- - -----
--- ------- - -----
--- ---- - - -- - - --------------- ---- -
-- ---------------- --- ------ -
--- - ----------------
------- - ----------------
------
-
-
-- ---- --- ---- -- ------- --- --- -
------ -----
-
------ ------------- ---- -- ---- -- -
--- ----- - -------
--- ----- - -------
--- ---- - ------------- - ------------------- - -------
--- ---- - ------------- - ------------------- - -------
-- ----- - ----- -
------ ------- --- ------ - - - ---
- ---- -- ----- - ----- -
------ ------- --- ----- - - - ---
- ---- -
------ --
-
---
-
------ ---------------- ---- ------- ---- ----- ----- --- -
-- ------- -
------ ---
-
--- --------- - ---------- - -- - ------------------
------ --------------------- --------- - -------------------
-
-这里的主要变化是构造器中对数据的异步获取，以及表格从数据中获取而不是定义静态的 rows 数组，Controller 大致分为以下几部分:
- 获取数据
- 简单的输入框搜索，实现了 reset 和触发变更表格的流程
- 排序和分页相关业务处理
config 对象中 'paging', 'sorting', 'filtering' 的属性都是 ngx-pagination 和 ng2-table 的支持，它们的值分别表示是否分页、排序、过滤，相应的细节在其文档中会有相应介绍。
总结
通过使用 npm 包 angular2-serverpagination-datatable-fixed，我们可以很方便地创建一个具有服务器端分页和过滤功能的 JavaScript 数据表格。同时，它也和 Angular2 我们常常使用的诸多组件相容，例如 Angular2 Router、Angular2 Http 等，非常便于使用。详细的实现细节和相关代码均可以在该项目的 GitHub 网页上找到。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005670b81e8991b448e34b4