需求是这样的,有一些业务需要展示业务列表,而不同的业务其表头不完全相同,出于复用的原因,考虑写一个通用的表,用来展示业务列表。
使用组件:NG-Zorro
1.配置文件
配置文件采用Json格式,放在assets下面
{
"header": [{
"label": "标识码",
"field": "bsm"
},
{
"label": "年度",
"field": "nd"
},
{
"label": "单位名称",
"field": "ywdw"
},
{
"label": "检查人员",
"field": "jcry"
},
{
"label": "检查时间",
"field": "jcsj"
},
{
"label": "检查结果",
"field": "jcjg"
}
]
}
2.获取表头配置信息
通过http的Get请求获取配置信息,可实现异步加载
getHeader(): any {
return this.http.get(`./assets/table-header-list.json`);
}
3.解析表头信息
tableInit() {
this.chxmService.getJcchxmglHeader().subscribe( res => {
this._tableHeaders = res.header;
// 获取数据
this.refreshData();
});
}
4.列表构建
<div style="margin-bottom: 16px;">
<button nz-button [disabled]="_disabledButton" [nzType]="'primary'" [nzLoading]="_operating" (click)="_operateData()">Operating</button>
<span style="margin-left: 8px;" *ngIf="_checkedNumber">Selected {
{_checkedNumber}} items</span>
</div>
<nz-table #nzTable [nzAjaxData]="_dataSet" [nzLoading]="_tableLoad" [nzPageSize]="10" [(nzPageIndex)]="_pageIndex" [nzTotal]="_total" (nzPageIndexChange)="refreshData()" (nzPageSizeChange)="refreshData()">
<thead nz-thead>
<tr>
<th nz-th nzCheckbox>
<label nz-checkbox [(ngModel)]="_allChecked" [nzIndeterminate]="_indeterminate" (ngModelChange)="_checkAll($event)">
</label>
</th>
<th *ngFor="let i of _tableHeaders">{
{ i.label }}</th>
</tr>
</thead>
<tbody nz-tbody>
<tr nz-tbody-tr *ngFor="let i of nzTable.data">
<td nz-td nzCheckbox>
<label nz-checkbox [(ngModel)]="i.checked" (ngModelChange)="_refreshStatus($event)">
</label>
</td>
<td nz-td *ngFor="let t of _tableHeaders">{
{i[t.field]}}</td>
</tr>
</tbody>
</nz-table>
配置文件中有两个字段,label即表头显示名称,field是表内容的真实字段名,使用 i[t.field]的方式获取属性的值,从而达到绑定数据的功能