介绍
angular2-datatable-ziyu 是一个基于 Angular2 的数据表格组件。它可以快速方便地构建数据管理页面，并提供强大的搜索、筛选、排序和分页功能。此外，它还支持自定义模板、多选和行编辑等高级功能。
安装
npm install angular2-datatable-ziyu --save
使用
导入模块
在你的 module.ts 文件中导入 DataTableModule：
import { NgModule } from '@angular/core';
import { DataTableModule } from 'angular2-datatable-ziyu';
@NgModule({
imports: [ DataTableModule ],
})
export class SampleModule { }在模板中使用
在你的组件的 HTML 模板中使用 datatable 标签来创建数据表格：
<datatable [data]="myData"></datatable>
其中 myData 是一个数组，包含了要展示的数据。这里假设该数组定义在组件的属性中。
配置表格
你可以使用 datatable 的属性来配置表格的样式和行为：
<datatable [data]="myData" [search]="true" [pageSize]="10" [multiSelect]="true" (selectedItems)="onSelect($event)"> </datatable>
上面的代码中，我们启用了搜索和多选功能，同时设置每页显示 10 条记录。在模板中我们还需要实现 onSelect 方法来处理选中的数据。
自定义模板
datatable 还支持自定义模板来定制表格的外观：
-- -------------------- ---- -------
---------- ----------------
----------------- ------------
------------ --------
-------------------
--------------
-------------------
----------------- ------------
------------ --------
---------------- - -------------
--------------
-------------------
------------上面的代码中，我们为两列设置了不同的模板，它们分别显示 name 和 date 属性，并且对 date 属性进行了格式化。
总结
angular2-datatable-ziyu 是一个功能强大的 Angular2 数据表格组件，它可以大大简化数据管理界面的开发工作。它提供了丰富的配置选项和自定义模板功能，可以满足各种业务需求。在使用时，我们需要认真掌握其属性和方法，以获得最佳的使用效果和开发体验。
示例代码
app.module.ts：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - --------------- - ---- -------------------------- ------ - ------------ - ---- ------------------ ----------- -------- - -------------- --------------- -- ------------- - ------------ -- ---------- - ------------ - -- ------ ----- --------- - -
app.component.ts：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- ---------
--------- -
------ --------
---------- ---------------
---------------
---------------
--------------------
-----------------------------------
----------------- ------------
------------ --------
-------------------
--------------
-------------------
----------------- ------------
------------ --------
---------------- - -------------
--------------
-------------------
------------
--
--
------ ----- ------------ -
------ - --
----- --------
----- --- ------
-- -
----- ------
----- --- ---------- -- --
---
------------------ ------ -
----------------------- ----------
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556c681e8991b448d39a2