介绍
@zmb-gmbh/ng2-md-datatable是一个基于AngularJS2的开源框架，它可以帮助你快速地创建一个响应式的数据列表页面。该框架提供了许多特性，包括搜索、排序、分页等功能，使用起来非常简单。
安装
安装@zmb-gmbh/ng2-md-datatable模块需要使用npm命令：
--- ------- -------------------------- ------
引用
在你的项目中引用@zmb-gmbh/ng2-md-datatable模块：
------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ---------- - ---- ---------------- ------ - ------------ - ---- ------------------ ------ - -------------------- - ---- ----------------------------- ----------- -------- - -------------- ----------- -------------------- -- ------------- - ------------ -- ---------- - ------------ - -- ------ ----- --------- - -
使用
使用@zmb-gmbh/ng2-md-datatable模块可以使用以下步骤：
- 在模板中添加datatable标签。
- 在组件的文件中创建数据数组。
- 绑定数据数组到datatable组件中。
- 在组件的文件中创建列定义。
- 绑定列定义到datatable组件中。
模板
在你的模板中添加以下代码：
---------- ------------- --------------------------------
data与columns是两个属性，分别表示数据数组与列定义。
数据
在你的组件文件中创建数据数组，数据数组必须是一个对象的数组，每一个对象代表一行数据。例如：
--------- - -
- ----- ------- ---- ----- ------ ------------------- ------- ----------
- ----- ------ ---- ----- ------ ------------------ ------- ------------
- ----- ------- ---- ----- ------ ------------------- ------- ----------
- ----- ------- ---- ----- ------ ------------------- ------- ------------
--列定义
在你的组件文件中创建列定义数组，每个属性代表一列，它包含属性title表示标题，name表示数据数组中对应的字段，还可以设置宽度、排序等。例如：
------------ - -
- ------ ------- ----- ------- ------ ------- ----- ---- --
- ------ ------ ----- ------ ------ --- ----- ---- --
- ------ -------- ----- -------- ------ --- ----- ----- --
- ------ --------- ----- --------- ------ --- ----- ----- --
--此时你的页面将生成一个带搜索、分页、排序、选择列等操作的数据列表。
示例代码
app.component.ts
------ - --------- - ---- ----------------
------ - -------------- - ---- ----------------
------ - -------------------- - ---- -----------------------------
------------
--------- ---------
--------- -
------------- ---------
---------- ------------- --------------------------------
--
--
------ ----- ------------ -
---- - -
- ----- ------- ---- ----- ------ ------------------- ------- ----------
- ----- ------ ---- ----- ------ ------------------ ------- ------------
- ----- ------- ---- ----- ------ ------------------- ------- ----------
- ----- ------- ---- ----- ------ ------------------- ------- ------------
--
------- - -
- ------ ------- ----- ------- ------ ------- ----- ---- --
- ------ ------ ----- ------ ------ --- ----- ---- --
- ------ -------- ----- -------- ------ --- ----- ----- --
- ------ --------- ----- --------- ------ --- ----- ----- --
--
-app.module.ts
------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ---------- - ---- ---------------- ------ - ------------ - ---- ------------------ ------ - -------------------- - ---- ----------------------------- ----------- -------- - -------------- ----------- -------------------- -- ------------- - ------------ -- ---------- - ------------ - -- ------ ----- --------- - -
总结
@zmb-gmbh/ng2-md-datatable是一个非常强大的开源AngularJS2组件，它可以快速地创建一个响应式的数据列表页面。拥有搜索、排序、分页等功能，使用起来非常简单。我们相信这个组件一定会让你在前端开发中受益匪浅。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60056cbe81e8991b448e632f