Angular4多级表格，层级表格树
<tableclass="table ">
<tbodyrtSelectionArea [multiple]=" multiple"style="position: relative; ">
<ng-templatengForlet-hu [ngForOf]="list.items">
<tr>
<td (click)="expandOrder(hu)">
<i [ngClass]="{'fa': true, 'fa-caret-right': !hu.expanded,'fa-caret-down': hu.expanded, 'fa-lg': false}"
#orderID></i>
</td>
<td>
<inputtype="checkbox" [rtSelectionCheckboxFor]="hu" [(selected)]="hu.selected" (click)="setRtList(list);chbCheckkAll.nativeElement.checked = '';" />
</td>
<td>{{hu.handlingUnitID}}</td>
<td>{{hu.uom}}</td>
</tr>
<tr [hidden]='!hu.expanded'>
<tdcolspan="7">
<table>
<thead>
<tr>
<th>
</th>
<th>Delivery</th>
<th>Customer</th>
<th>ShipTo</th>
<th>SO Number</th>
<th>Type</th>
<th>requested Date</th>
</tr>
</thead>
<tbody>
<ng-templatengForlet-item [ngForOf]="hu.deliveryOrder" let-i="index">
<tr>
<td (click)="expandMaterial(item,hu.palletId)">
<i [ngClass]="{'fa': true, 'fa-caret-right': !item.childexpanded,'fa-caret-down': item.childexpanded, 'fa-lg': false}"
#orderID></i>
</td>
<td>{{item.saP_DeliveryOrderID}}</td>
<td>{{item.customer}}</td>
<td>{{item.shipTo}}</td>
<td>{{item.soNumber}}</td>
<td>{{item.type}}</td>
<td>{{item.requestedDelivery}}</td>
</tr>
<tr [hidden]='!item.childexpanded'>
<tdcolspan="7">
<table>
<thead>
<tr>
<th style="width:100px;"></th>
<th>Line</th>
<th>Material</th>
<th>Description</th>
<th>Qty</th>
<th>UoM</th>
<th></th>
</tr>
</thead>
<tbody>
<ng-templatengForlet-child [ngForOf]="item.pickDetails" let-i="index">
<tr>
<td></td>
<td>{{(i+1)*10}}</td>
<td>{{child.saP_Material_ID}}</td>
<td>{{child.saP_Description}}</td>
<td>{{child.pickedQty}}</td>
<td>{{child.saP_UOM}}</td>
<td></td>
</tr>
</ng-template>
</tbody>
</table>
</td>
</tr>
</ng-template>
</tbody>
</table>
</td>
</tr>
</ng-template>
</tbody>
<thead>
<tr *ngIf="progressCode == 'UNASSIGNED'">
<thstyle="position: relative; width:10px" [style.top]="columnTop" (click)="expandAll(list)">
<i class="fa fa-caret-right fa-lg"></i>
</th>
<thstyle="position: relative; " [style.top]=" columnTop">
<inputtype="checkbox" (click)="setRtList(list); selectAll($event);" #chbCheckkAll>
</th>
<thstyle="position: relative; " [style.top]=" columnTop">
<spanrtSort="saP_ProductionOrderID">Handling Unit ID</span>
</th>
<thstyle="position: relative;" [style.top]="columnTop">
<spanrtSort="saP_ExpectedDate">UoM</span>
</th>
</tr>
<tr *ngIf="progressCode == 'WAITING'">
<th>
<i class="fa fa-caret-right fa-lg"></i>
</th>
<thstyle="position: relative;" [style.top]="columnTop">
<inputtype="checkbox" (click)="setRtList(list);selectAll($event);" #chbCheckkAll>
</th>
<thstyle="position: relative;" [style.top]="columnTop">
<span>Handling Unit ID</span>
</th>
<thstyle="position: relative;" [style.top]="columnTop">
<span>Requested Delivery</span>
</th>
</tr>
</thead>
<tfoot>
<tr>
<tdcolspan="10">
<rt-status-progress>
<progress-bar></progress-bar>
</rt-status-progress>
<rt-status-no-dataclass="text-center">
0 records found
</rt-status-no-data>
<div>
<rt-status-done>
<rt-buffered-pager [defaultRowCount]="20" #rtPager>
<span>{{rtPager.pager.loadedCount}} record{{rtPager.pager.loadedCount > 1 ? 's' :
''}} found</span>
<a *ngIf="rtPager.canLoadMore" tabindex="0" (click)="rtPager.loadMore()"
rtPreventDefaults="click" [class.hidden]="!rtPager.canLoadMore" [rtInfinite]="window"
href="#">Show more</a>
</rt-buffered-pager>
</rt-status-done>
</div>
</td>
</tr>
</tfoot>
</table>
======================展开所有，展开订单，展开材料的方法：
getHUs = (request: HandlingUnitsRequest): Observable<any> => {
if (this.chbCheckkAll) {
this.chbCheckkAll.nativeElement.checked = '';
}
const response = this.service.handlingUnits(request);
response.subscribe((data: any[]) => {
this.onDataLoaded.emit(data.length !== 0);
console.log(data);
}, (err => {
console.log(err);
}), () => {
console.log('SUccessssss');
});
return response;
};
expandAll(list: any) {
for (leti = 0; i < list.items.length; i++) {
list.items[i].expanded = true;
console.log(list.items);
this.service.handingUnitDelivery(list.items[i].palletId).subscribe(result => {
for (letj = 0; j < result.length; j++) {
result[j].expandoder = false;
}
list.items[i].deliveryOrder = result;
});
}
}
expandOrder(hu: any) {
hu.expanded = !hu.expanded;
this.service.handingUnitDelivery(hu.palletId).subscribe(result => {
for (leti = 0; i < result.length; i++) {
result[i].expandoder = false;
}
hu.deliveryOrder = result;
});
}
expandMaterial(deliveryOrder: any, palletId: number) {
this.service.handingUnitDeliveryDetail(palletId, deliveryOrder.delOrderId).subscribe(result => {
deliveryOrder.pickDetails = result;
});
deliveryOrder.childexpanded = !deliveryOrder.childexpanded;
}
捣鼓了一周啊，当然还有一些过滤的操作啥的。 这里源码主要是 table树的。
