前言:
表格几乎是每个项目当中都会涉及到的一种组件,表格也因项目需求不同,所具备的功能不同,此篇博文小编为大家讲述要求操作列根据数据项而显示不同。
正文:
业务需求:根据表格中的状态不同,操作列显示的内容不同。
实践技术:Angular4+ng-zorro
一。原生引用:
1.html
<nz-table #nzTable [nzDataSource]="data" [nzPageSize]="50" [nzScroll]="{ y: 240 }">
<ng-template #nzFixedHeader>
<thead nz-thead>
<tr>
<th nz-th [nzWidth]="'150px'"><span>Name</span></th>
<th nz-th [nzWidth]="'150px'"><span>Age</span></th>
<th nz-th><span>Address</span></th>
</tr>
</thead>
</ng-template>
<tbody nz-tbody>
<tr nz-tbody-tr *ngFor="let data of nzTable.data">
<td nz-td>{{data.name}}</td>
<td nz-td>{{data.age}}</td>
<td nz-td>{{data.address}}</td>
</tr>
</tbody>
</nz-table>
2.ts
export class NzDemoTableFixedHeaderComponent implements OnInit {
data = [];
constructor() {
}
ngOnInit() {
for (let i = 0; i < 100; i++) {
this.data.push({
name : `Edward King ${i}`,
age : 32,
address: `London, Park Lane no. ${i}`,
});
}
}
}
3.效果:
二。依据项目而改造
1.显示项目所需数据
(1)html
<nz-table #nzTable [nzDataSource]="data" [nzPageSize]="50" [nzScroll]="{ y: 240 }">
<ng-template #nzFixedHeader>
<thead nz-thead>
<tr><!-- 改变表头 -->
<th nz-th [nzWidth]="'150px'">
<span>机构名称</span>
</th>
<th nz-th [nzWidth]="'150px'">
<span>产品名称</span>
</th>
<th nz-th [nzWidth]="'150px'">
<span>进件类型</span>
</th>
<th nz-th [nzWidth]="'150px'">
<span>流程配置</span>
</th>
<th nz-th [nzWidth]="'150px'">
<span>修改人</span>
</th>
<th nz-th [nzWidth]="'150px'">
<span>状态</span>
</th>
<th nz-th [nzWidth]="'150px'">
<span>最后修改时间</span>
</th>
</tr>
</thead>
</ng-template>
<tbody nz-tbody>
<tr nz-tbody-tr *ngFor="let data of nzTable.data">
<td nz-td>{{data.organizationName}}</td> <!--改变接收字段-->
<td nz-td>{{data.productName}}</td>
<td nz-td>{{data.comeTypeName}}</td>
<td nz-td>{{data.flowName}}</td>
<td nz-td>{{data.modifiedId}}</td>
<td nz-td>{{data.examineStatus}}</td>
<td nz-td>{{data.lastModifiedTime}}</td>
</tr>
</tbody>
</nz-table>
(2).ts
data = new Array();
pageSize = 10;
page = 1;
getData() {
this.page = 1;
this.pageSize = 20;
let url = 'work/ProductFlowConfigController/selectProductRel/' + this.page + '/' + this.pageSize;
// let url = 'ProductFlowConfigController/selectProductRel/' + this.page + '/' + this.pageSize;
this.http.get(url).subscribe(
res => {
if (res.json().code == '20000') {
this.data = res.json().data.content; <!--前后端交互获取数据-->
} else {
this.errorInfo = '产品流程配置表格数据初始化失败';
this.error();
}
}
)
}
(3)显示效果图
2.增加操作列
(1)html
<nz-table #nzTable [nzDataSource]="data" [nzPageSize]="50" [nzScroll]="{ y: 240 }">
<ng-template #nzFixedHeader>
<thead nz-thead>
<tr>
<th nz-th [nzWidth]="'150px'">
<span>机构名称</span>
</th>
<th nz-th [nzWidth]="'150px'">
<span>产品名称</span>
</th>
<th nz-th [nzWidth]="'150px'">
<span>进件类型</span>
</th>
<th nz-th [nzWidth]="'150px'">
<span>流程配置</span>
</th>
<th nz-th [nzWidth]="'150px'">
<span>修改人</span>
</th>
<th nz-th [nzWidth]="'150px'">
<span>状态</span>
</th>
<th nz-th [nzWidth]="'150px'">
<span>最后修改时间</span>
</th>
<th nz-th [nzWidth]="'150px'"> <!--增加操作列表头-->
<span>操作列</span>
</th>
</tr>
</thead>
</ng-template>
<tbody nz-tbody>
<tr nz-tbody-tr *ngFor="let data of nzTable.data">
<td nz-td>{{data.organizationName}}</td>
<td nz-td>{{data.productName}}</td>
<td nz-td>{{data.comeTypeName}}</td>
<td nz-td>{{data.flowName}}</td>
<td nz-td>{{data.modifiedId}}</td>
<td nz-td>{{data.examineStatus}}</td>
<td nz-td>{{data.lastModifiedTime}}</td>
<td nz-td> <!--增加操作列内容-->
<span>
<a>配置</a>
<a>编辑</a>
<a>发布</a>
</span>
</td>
</tr>
</tbody>
</nz-table>
(2)效果图
3.操作列内容随着状态的改变而不同,同时样式不同
(1)html
<nz-table #nzTable [nzDataSource]="data" [nzPageSize]="50" [nzScroll]="{ y: 240 }">
<ng-template #nzFixedHeader>
<thead nz-thead>
<tr>
<th nz-th [nzWidth]="'150px'">
<span>机构名称</span>
</th>
<th nz-th [nzWidth]="'150px'">
<span>产品名称</span>
</th>
<th nz-th [nzWidth]="'150px'">
<span>进件类型</span>
</th>
<th nz-th [nzWidth]="'150px'">
<span>流程配置</span>
</th>
<th nz-th [nzWidth]="'150px'">
<span>修改人</span>
</th>
<th nz-th [nzWidth]="'150px'">
<span>状态</span>
</th>
<th nz-th [nzWidth]="'150px'">
<span>最后修改时间</span>
</th>
<th nz-th [nzWidth]="'150px'">
<span>操作列</span>
</th>
</tr>
</thead>
</ng-template>
<tbody nz-tbody>
<tr nz-tbody-tr *ngFor="let data of nzTable.data">
<td nz-td>{{data.organizationName}}</td>
<td nz-td>{{data.productName}}</td>
<td nz-td>{{data.comeTypeName}}</td>
<td nz-td>{{data.flowName}}</td>
<td nz-td>{{data.modifiedId}}</td>
<td nz-td>{{data.examineStatus}}</td>
<td nz-td>{{data.lastModifiedTime}}</td>
<td nz-td>
<span> <!--增加判断,根据状态不同,而操作列显示内容不同-->
<div *ngIf="data.examineStatus=='编辑中'||data.examineStatus=='退回待处理'||data.examineStatus=='已发布'">
<a class="config_style">配置</a>
<a class="edit_style">编辑</a>
<a class="release_style">发布</a>
</div>
<div *ngIf="data.examineStatus=='待审核'">
<a disabled="disabled">配置</a>
<a disabled="disabled">编辑</a>
<a disabled="disabled">发布</a>
</div>
</span>
</td>
</tr>
</tbody>
</nz-table>
(2)css样式文件
/* -----------------------操作列:配置按钮样式-------------------- */
.config_style{
color: darkorchid;
}
/* ------------------------操作列:编辑按钮样式------------------- */
.edit_style{
color: deeppink;
}
/* -----------------------操作列:发布按钮样式----------------- */
.release_style{
color: coral;
}
(3)效果图
4.操作列内容不同,功能不同
(1)HTML
<nz-table #nzTable [nzDataSource]="data" [nzPageSize]="50" [nzScroll]="{ y: 240 }">
<ng-template #nzFixedHeader>
<thead nz-thead>
<tr>
<th nz-th [nzWidth]="'150px'">
<span>机构名称</span>
</th>
<th nz-th [nzWidth]="'150px'">
<span>产品名称</span>
</th>
<th nz-th [nzWidth]="'150px'">
<span>进件类型</span>
</th>
<th nz-th [nzWidth]="'150px'">
<span>流程配置</span>
</th>
<th nz-th [nzWidth]="'150px'">
<span>修改人</span>
</th>
<th nz-th [nzWidth]="'150px'">
<span>状态</span>
</th>
<th nz-th [nzWidth]="'150px'">
<span>最后修改时间</span>
</th>
<th nz-th [nzWidth]="'150px'">
<span>操作列</span>
</th>
</tr>
</thead>
</ng-template>
<tbody nz-tbody>
<tr nz-tbody-tr *ngFor="let data of nzTable.data">
<td nz-td>{{data.organizationName}}</td>
<td nz-td>{{data.productName}}</td>
<td nz-td>{{data.comeTypeName}}</td>
<td nz-td>{{data.flowName}}</td>
<td nz-td>{{data.modifiedId}}</td>
<td nz-td>{{data.examineStatus}}</td>
<td nz-td>{{data.lastModifiedTime}}</td>
<td nz-td>
<span>
<div *ngIf="data.examineStatus=='编辑中'||data.examineStatus=='退回待处理'||data.examineStatus=='已发布'">
<a class="config_style" (click)="config(data)">配置</a> <!--单级不同操作列内容,出发不同功能-->
<a class="edit_style" (click)="editInfo(data)">编辑</a>
<a class="release_style" (click)="release(data)">发布</a>
</div>
<div *ngIf="data.examineStatus=='待审核'">
<a disabled="disabled">配置</a>
<a disabled="disabled">编辑</a>
<a disabled="disabled">发布</a>
</div>
</span>
</td>
</tr>
</tbody>
</nz-table>
(2)ts
/**
* 点击配置
* @param obj 每条数据
*/
config(obj: any) {
localStorage.setItem('product_process_id', obj.id);
localStorage.setItem('product_process_flowId', obj.flowId)
this.router.navigateByUrl('workspace/risk-process-manage/product-process-config/process-line-manage/process-line-manage');
}
/**
* 点击编辑
* @param obj 每条数据
*/
editInfo(obj: any) {
localStorage.setItem('add_product_process_model', JSON.stringify(obj));
this.router.navigate(['workspace/risk-process-manage/product-process-config/edit-product-process']);
}
/**
* 点击发布
* @param obj 每条数据
*/
release(obj: any) {
let relId = obj.id;
let body = '';
let url = 'work/ProductFlowConfigController/startFlow/' + relId;
this.http.post(url, body).subscribe(
res => {
if (res.json().code == '20000') {
this.getData();
this.successInfo = '恭喜您发布成功,状态已更改为待审核,该条数据不可再操作';
this.success();
} else {
this.errorInfo = '发布失败,请联系管理员';
this.error();
}
}
)
}
结语:
向阳而生。