json格式:
this.cars = [
{
brand: "Audi",
vin: "aaa",
year: "1970",
color: "Black"
},
{
brand: "Audi",
vin: "aab",
year: "1970",
color: "Black"
},
{
brand: "Audi",
vin: "aac",
year: "1978",
color: "Black"
}
]
.html:
<p-table [value]="cars" sortField="brand" sortMode="single" (onSort)="onSort()">
<ng-template pTemplate="header">
<tr>
<th>Brand</th>
<th>Vin</th>
<th>Year</th>
<th>Color</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex">
<tr>
<td *ngIf="rowBrandGroup[rowData.brand].index === rowIndex" [attr.rowspan]="rowBrandGroup[rowData.brand].size">
{{rowData.brand}}
</td>
<td>{{rowData.vin}}</td>
<td *ngIf="rowYearGroup[rowData.year].index === rowIndex" [attr.rowspan]="rowYearGroup[rowData.year].size">
{{rowData.year}}</td>
<td>{{rowData.color}}</td>
</tr>
</ng-template>
</p-table>
.ts:
cars: any;
rowBrandGroup: any;
rowYearGroup : any;
onSort() {
this.BrandRowGroupData();
this.YearRowGroupData();
}
BrandRowGroupData() {
this.rowBrandGroup = {};
if (this.cars) {
for (let i = 0; i < this.cars.length; i++) {
let rowData = this.cars[i];
let brand = rowData.brand;
if (i == 0) {
this.rowBrandGroup[brand] = { index: 0, size: 1 };
}
else {
let previousRowData = this.cars[i - 1];
let previousRowGroup = previousRowData.brand;
if (brand === previousRowGroup)
this.rowBrandGroup[brand].size++;
else
this.rowBrandGroup[brand] = { index: i, size: 1 };
}
}
}
}
YearRowGroupData() {
this.rowYearGroup = {};
if (this.cars) {
for (let i = 0; i < this.cars.length; i++) {
let rowData = this.cars[i];
let year = rowData.year;
if (i == 0) {
this.rowYearGroup[year] = { index: 0, size: 1 };
}
else {
let previousRowData = this.cars[i - 1];
let previousRowGroup = previousRowData.year;
if (year === previousRowGroup)
this.rowYearGroup[year].size++;
else
this.rowYearGroup[year] = { index: i, size: 1 };
}
}
}
}
效果图: