基于angular實現(xiàn)樹形二級表格
先看效果:
代碼:
1、html
<div class="userContent_content"> <div> <table> <tr> <td>節(jié)點名稱</td> <td>節(jié)點管理IP</td> <td>節(jié)點登錄名</td> <td>節(jié)點登錄密碼</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"> //由于在同一個標簽內(nèi),for循環(huán)和if判斷不能同時共存,因此我們的隱藏事件if放置tr標簽內(nèi),通過判斷當前點擊的索引與列表索引是否一致,相等則收起,不等則顯示的功能。 <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表格數(shù)據(jù)的格式類似如下(你們自己寫個模擬數(shù)據(jù)吧):
(2)初始化當前的點擊索引變量currentClickOpenIndex 為-1
(3)是展開收起箭頭的點擊事件:
clickShowChildList = (i,item)=>{ console.log(i,this.currentClickOpenIndex) if(this.currentClickOpenIndex==i){ this.currentClickOpenIndex = -1 }else{ this.currentClickOpenIndex = i } }
然后就完成了……
到此這篇關(guān)于基于angular實現(xiàn)樹形二級表格的文章就介紹到這了,更多相關(guān)angular樹形二級表格內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
AngularJS轉(zhuǎn)換響應(yīng)內(nèi)容
這篇文章主要介紹了AngularJS轉(zhuǎn)換響應(yīng)內(nèi)容 的相關(guān)資料,需要的朋友可以參考下2016-01-01Angular6 用戶自定義標簽開發(fā)的實現(xiàn)方法
這篇文章主要介紹了Angular6 用戶自定義標簽開發(fā)的實現(xiàn)方法,下面我們就通過一個簡單的例子演示Angular6中的這一新功能,小編覺得挺不錯的,現(xiàn)在分享給大家,需要的朋友可以參考下2019-01-01AngularJS通過ng-route實現(xiàn)基本的路由功能實例詳解
這篇文章主要介紹了AngularJS通過ng-route實現(xiàn)基本的路由功能,結(jié)合實例形式詳細分析了AngularJS使用ng-route實現(xiàn)路由功能的操作步驟與相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2016-12-12淺析如何利用angular結(jié)合translate為項目實現(xiàn)國際化
利用angular進行國際化轉(zhuǎn)換時利用【ng-bind-html】來進行語言的翻譯是接近幾乎比較完美的方案,不會像利用【{{}}】模式,當頁面加載緩慢時導致頁面太丑。本文對其實現(xiàn)方法進行介紹,有需要的朋友可以看下2016-12-12