介绍
@zmb-gmbh/ng2-md-datatable是一个基于AngularJS2的开源框架，它可以帮助你快速地创建一个响应式的数据列表页面。该框架提供了许多特性，包括搜索、排序、分页等功能，使用起来非常简单。
安装
安装@zmb-gmbh/ng2-md-datatable模块需要使用npm命令：
npm install @zmb-gmbh/ng2-md-datatable --save
引用
在你的项目中引用@zmb-gmbh/ng2-md-datatable模块：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ---------- - ---- ---------------- ------ - ------------ - ---- ------------------ ------ - -------------------- - ---- ----------------------------- ----------- -------- - -------------- ----------- -------------------- -- ------------- - ------------ -- ---------- - ------------ - -- ------ ----- --------- - -
使用
使用@zmb-gmbh/ng2-md-datatable模块可以使用以下步骤：
- 在模板中添加datatable标签。
- 在组件的文件中创建数据数组。
- 绑定数据数组到datatable组件中。
- 在组件的文件中创建列定义。
- 绑定列定义到datatable组件中。
模板
在你的模板中添加以下代码：
<datatable [data]="data" [columns]="columns"></datatable>
data与columns是两个属性，分别表示数据数组与列定义。
数据
在你的组件文件中创建数据数组，数据数组必须是一个对象的数组，每一个对象代表一行数据。例如：
this.data = [
{ name: 'John', age: '20', email: 'john@example.com', status: 'Active'},
{ name: 'Joe', age: '25', email: 'joe@example.com', status: 'Inactive'},
{ name: 'Mary', age: '30', email: 'mary@example.com', status: 'Active'},
{ name: 'Jane', age: '35', email: 'jane@example.com', status: 'Inactive'},
];列定义
在你的组件文件中创建列定义数组，每个属性代表一列，它包含属性title表示标题，name表示数据数组中对应的字段，还可以设置宽度、排序等。例如：
this.columns = [
{ title: 'Name', name: 'name', width: '20px', sort: true },
{ title: 'Age', name: 'age', width: '', sort: true },
{ title: 'Email', name: 'email', width: '', sort: false },
{ title: 'Status', name: 'status', width: '', sort: false },
];此时你的页面将生成一个带搜索、分页、排序、选择列等操作的数据列表。
示例代码
app.component.ts
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- - ---- ----------------
------ - -------------------- - ---- -----------------------------
------------
--------- ---------
--------- -
------------- ---------
---------- ------------- --------------------------------
--
--
------ ----- ------------ -
---- - -
- ----- ------- ---- ----- ------ ------------------- ------- ----------
- ----- ------ ---- ----- ------ ------------------ ------- ------------
- ----- ------- ---- ----- ------ ------------------- ------- ----------
- ----- ------- ---- ----- ------ ------------------- ------- ------------
--
------- - -
- ------ ------- ----- ------- ------ ------- ----- ---- --
- ------ ------ ----- ------ ------ --- ----- ---- --
- ------ -------- ----- -------- ------ --- ----- ----- --
- ------ --------- ----- --------- ------ --- ----- ----- --
--
-app.module.ts
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ---------- - ---- ---------------- ------ - ------------ - ---- ------------------ ------ - -------------------- - ---- ----------------------------- ----------- -------- - -------------- ----------- -------------------- -- ------------- - ------------ -- ---------- - ------------ - -- ------ ----- --------- - -
总结
@zmb-gmbh/ng2-md-datatable是一个非常强大的开源AngularJS2组件，它可以快速地创建一个响应式的数据列表页面。拥有搜索、排序、分页等功能，使用起来非常简单。我们相信这个组件一定会让你在前端开发中受益匪浅。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cbe81e8991b448e632f