加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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

发布时间：2020-12-17 08:36:41 所属栏目：安全 来源：网络整理
导读：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 ]= "{'f
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树的。 有时间详细卸载自己的博客上

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
    相关内容
      推荐文章
        站长推荐
        热点阅读

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同