前言
ngx-elastic-datatable 是一个基于 Angular 的扩展包，旨在帮助前端开发人员更加便捷地实现可扩展的表格功能。本文将介绍 ngx-elastic-datatable 的使用方法及相关注意事项。
安装
在 Angular 项目中通过 npm 安装 ngx-elastic-datatable：
npm install ngx-elastic-datatable --save
使用
引入模块
在 app.module.ts 中引入 NgxElasticDatatable 模块：
-- -------------------- ---- -------
------ - ------------------------- - ---- ------------------------
-----------
-------- -
-------------------------
--
------------- ---
---------- --
--
------ ----- --------- - -使用组件
在需要使用 ngx-elastic-datatable 的组件中，通过以下方式引入组件：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------- - ---- ------------------------
------------
--------- -----------
------------ ----------------------
--
------ ----- ------------ -
-------- ---------------- - -
-------- --
------ -------
------ ------
-- -
------ ---------
------ --------
-- -
------ ------
------ -----
---
----- --
----- -----
------- ----
---- --
-- -
----- -----
------- ----
---- --
-- -
----- -----
------- ----
---- --
--
--
-options 中包含了 ngx-elastic-datatable 所需的数据，其中 columns 表示表格列的配置，data 表示表格数据。更多选项将在后续章节中介绍。
在 AppComponent 的 HTML 模板中使用 ngx-elastic-datatable 组件：
<ngx-elastic-datatable
[options]="options">
</ngx-elastic-datatable>此时 ngx-elastic-datatable 组件会根据 options 中的配置来生成表格。
配置 options
在 options 中可以配置多个选项，包括列配置、数据配置、分页、排序、搜索等等。接下来分别介绍这些选项。
- 列配置
在 options.columns 中配置表格列，每个列都有 title 和 field 两个属性，分别表示列的标题和对应的数据字段。
-- -------------------- ---- -------
-------- ---------------- - -
-------- --
------ -------
------ ------
-- -
------ ---------
------ --------
-- -
------ ------
------ -----
---
-- ---
--- 数据配置
在 options.data 中配置表格数据，每个数据项都是一个对象，其中的属性名与 columns 中的 field 相对应。
-- -------------------- ---- -------
-------- ---------------- - -
-- ---
----- --
----- -----
------- ----
---- --
-- -
----- -----
------- ----
---- --
-- -
----- -----
------- ----
---- --
--
--- 分页
在 options.paging 中配置分页选项，设置是否启用分页、页大小、页码等。
options: DataTableOptions = {
// ...
paging: {
enabled: true,
pageSize: 10
}
};- 排序
在 options.sorting 中配置排序选项，设置是否启用排序、默认排序、支持的排序字段等。
-- -------------------- ---- -------
-------- ---------------- - -
-- ---
-------- -
-------- -----
-------- -------
------------ -----
-------- --
------ -------
------ ----
-- -
------ ---------
------ ----
--
-
--- 搜索
在 options.searching 中配置搜索选项，设置是否启用搜索及搜索文本、支持的搜索字段等。
-- -------------------- ---- -------
-------- ---------------- - -
-- ---
---------- -
-------- -----
----- ---
------- --
------ -------
------ ----
-- -
------ ---------
------ ----
--
-
--示例代码
完整的示例代码如下：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------- - ---- ------------------------
------------
--------- -----------
------------ ----------------------
--
------ ----- ------------ -
-------- ---------------- - -
-------- --
------ -------
------ ------
-- -
------ ---------
------ --------
-- -
------ ------
------ -----
---
------- -
-------- -----
--------- --
--
-------- -
-------- -----
-------- -------
------------ -----
-------- --
------ -------
------ ----
-- -
------ ---------
------ ----
--
--
---------- -
-------- -----
----- ---
------- --
------ -------
------ ----
-- -
------ ---------
------ ----
--
--
----- --
----- -----
------- ----
---- --
-- -
----- -----
------- ----
---- --
-- -
----- -----
------- ----
---- --
--
--
-<ngx-elastic-datatable
[options]="options">
</ngx-elastic-datatable>总结
如此，在 ngx-elastic-datatable 的协助下，我们可以更加便捷地实现可扩展的表格功能。希望本文能够对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562f581e8991b448e0b45