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

Angularjs 前端之家
前端之家收集整理的这篇文章主要介绍了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相关文章

AngularJS 简介
AngularJS 是一个JavaScript 框架。它可通过 注：建议把脚本放在 元素的底部。这会提高网页...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题，也即是页面闪烁问题。出现这个的...
AngularJS 指令
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HT...
AngularJS 表达式
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内...
AngularJS 表格
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用...
AngularJS 控制器
AngularJS 控制器控制AngularJS 应用程序的数据。AngularJS 控制器是常规的JavaScript 对象...
AngularJS Filters
过滤器可以使用一个管道字符（|）添加到表达式和指令中。AngularJS 过滤器AngularJS 过滤器...
KeyPress 和KeyDown 、KeUp之间的区别
keyup适用于文本框的数据输入和同步，以及数据的获取；keydown 与 keypress更适用于通过键...
angularjs -- 页面模板清除
angularJs模板缓存的清除，包括传统的 HTML标签设置清除缓存，以及angularJs的一些配置清除...
angularjs -- 监听angularJs列表数据是否渲染完毕
前端在做数据渲染的时候经常会遇到在数据渲染完毕后执行某些操作，这几天就一直遇到在列表...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作