基於angular實現樹形二級表格
先看效果:
代碼:
1、html
<div class="userContent_content"> <div> <table> <tr> <td>節點名稱</td> <td>節點管理IP</td> <td>節點登錄名</td> <td>節點登錄密碼</td> </tr> //使用ng-container作為空標簽用於輔助放置for或者if事件,它在審查元素中是找不到的 <ng-container *ngFor="let item of currentTotalList,let i = index"> <tr> <td style="color: #04AEB4;cursor: pointer;" class="img"> <div> <div>{{item.name}}</div> <div> //下面是箭頭的圖片,是展開和收起箭頭的切換,通過判斷當前點擊索引與列表索引是否相等,相等則展開,否則收起 <img (click)="clickShowChildList(i,item.name)" [attr.src]="i == currentClickOpenIndex?'../../assets/resource/img/bottom.png':'../../assets/resource/img/right.png'"> </div> </div> </td> <td>{{item.ip}}</td> <td>{{item.username}}</td> <td>{{item.password}}</td> </tr> //再次使用ng-container標簽嵌套表格的子級 <ng-container *ngFor="let childItem of item.nodeList, let j = index"> //由於在同一個標簽內,for循環和if判斷不能同時共存,因此我們的隱藏事件if放置tr標簽內,通過判斷當前點擊的索引與列表索引是否一致,相等則收起,不等則顯示的功能。 <tr *ngIf="i == currentClickOpenIndex"> <td style="color: #04AEB4;cursor: pointer;" class="img"> <div> <div> {{childItem.masterIp}}</div> </div> </td> <td>{{childItem.ip}}</td> <td>{{childItem.username}}</td> <td>{{childItem.password}}</td> </tr> </ng-container> </ng-container> </table> </div> </div>
2、less
.userContent_content{ width: 100%; height: calc(~"100% - 60px"); overflow: auto; >div:nth-child(1){ >table{ width: 100%; tr{ td{ width: 25%; text-align: center; font-size: 14px; color: #fff; padding: 16px 0px; box-shadow: 0 1px #333; } } .img { >div { width: 100%; display: flex; position: relative; >div:nth-child(1) { width: 85%; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; margin: 0 auto; } } img { height: 10px !important; width: 10px !important; margin-left: 0 !important; position: absolute; right: 0; top: 3px; } } } } >div:nth-child(2){ height: 80px; width: 90%; display: flex; align-items: center; margin: 0 auto; justify-content: flex-end; #page{ display: table; } } }
3、js
(1)currentTotalList表格數據的格式類似如下(你們自己寫個模擬數據吧):
(2)初始化當前的點擊索引變量currentClickOpenIndex 為-1
(3)是展開收起箭頭的點擊事件:
clickShowChildList = (i,item)=>{ console.log(i,this.currentClickOpenIndex) if(this.currentClickOpenIndex==i){ this.currentClickOpenIndex = -1 }else{ this.currentClickOpenIndex = i } }
然後就完成瞭……
到此這篇關於基於angular實現樹形二級表格的文章就介紹到這瞭,更多相關angular樹形二級表格內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!