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>
=====原文地址：http://blog.csdn.net/qq_36279445/article/details/78643548
======================展开所有，展开订单，展开材料的方法：
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树的。 有时间详细写在自己的博客上http://blog.csdn.net/qq_36279445/article/details/78643548