Angular 4 多级表格,层级表格树

前端之家收集整理的这篇文章主要介绍了Angular 4 多级表格,层级表格树前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
Angular 4 多级表格 层级表格树
< table class= "table " >
< tbody rtSelectionArea [ multiple]= "multiple" style= "position: relative; " >
< ng-template ngFor let-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 >
< input type= "checkBox" [ rtSelectionCheckBoxFor]= "hu" [( selected)]= "hu.selected" ( click)= "setRtList(list);chbCheckkAll.nativeElement.checked = '';"
/>
< td >{{hu.handlingUnitID}} </ td >
< td >{{hu.uom}} </ td >
</ tr >
< tr [ hidden]= '!hu.expanded' >
< td colspan= "7" >
< table >
< thead >
< th >
</ th >
< th >Delivery </ th >
< th >Customer </ th >
< th >ShipTo </ th >
< th >SO Number </ th >
< th >Type </ th >
< th >requested Date </ th >
</ thead >
< tbody >
< ng-template ngFor let-item [ ngForOf]= "hu.deliveryOrder" let-i= "index" >
< td ( click)= "expandMaterial(item,hu.palletId)" >
< 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 [ hidden]= '!item.childexpanded' >
< th style= "width:100px;"></ th>
< th >Line </ th >
< th >Material </ th >
< th >Description </ th >
< th >Qty </ th >
< th >UoM </ th >
< th></ th>
< ng-template ngFor let-child [ ngForOf]= "item.pickDetails" let-i= "index" >
< 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 >
</ ng-template >
</ tbody >
</ table >
< tr * ngIf= "progressCode == 'UNASSIGNED'" >
< th style= "position: relative; width:10px" [ style. top]= "columnTop" ( click)= "expandAll(list)" >
< i class= "fa fa-caret-right fa-lg"></ i>
< th style= "position: relative; " [ style. top]= "columnTop" >
< input type= "checkBox" ( click)= "setRtList(list); selectAll($event);" # chbCheckkAll>
< span rtSort= "saP_ProductionOrderID" >Handling Unit ID </ span >
< th style= "position: relative;" [ style. top]= "columnTop" >
< span rtSort= "saP_ExpectedDate" >UoM </ span >
< tr * ngIf= "progressCode == 'WAITING'" >
< input type= "checkBox" ( click)= "setRtList(list);selectAll($event);" # chbCheckkAll>
< span >Handling Unit ID </ span >
< span >Requested Delivery </ span >
< tfoot >
< td colspan= "10" >
< rt-status-progress >
< progress-bar></ progress-bar>
</ rt-status-progress >
< rt-status-no-data class= "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 >
</ tfoot >

======================展开所有,展开订单,展开材料的方法
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 ( let i = 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 ( let j = 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 ( let i = 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树的。 有时间详细卸载自己的博客
原文链接:https://www.f2er.com/angularjs/145588.html

猜你在找的Angularjs相关文章