基于angular實現樹形二級表格
更新時間：2021年10月15日 17:10:06 作者：suoh''s Blog
這篇文章主要介紹了angular手寫樹形二級表格的完整代碼，代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
先看效果：
代碼：
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">
//由于在同一個標簽內，for循環(huán)和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樹形二級表格內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
AngularJs Understanding Angular Templates
本文主要介紹AngularJs Understanding Angular Templates的資料，這里整理了詳細的資料及簡單示例代碼，有興趣的小伙伴的參考下2016-09-09
這篇文章主要介紹了AngularJS中一般函數參數傳遞用法,結合實例形式分析了模型參數與普通參數的具體功能與使用技巧,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了淺談Angular 的變化檢測的方法,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
Promise是一個構造函數，自己身上有all、reject、resolve這幾個異步方式處理值的方法，原型上有then、catch等同樣很眼熟的方法，下面通過實例代碼給大家講解angularjs promise 的相關知識，感興趣的朋友一起看看吧2018-03-03
爬蟲在檢索seo信息的時候會讀不了js給其賦的值，導致搜索引擎收錄不了或者收錄了無效的信息,下面本文給大家介紹Angular設置title信息解決SEO方面存在問題,需要的朋友可以參考下2016-08-08
最近抽空學習了一下Angular6，之前主要使用的是vue，所以免不了的也想對Angular6提供的工具進行一些封裝，今天主要就跟大家講一下這個http模塊2018-08-08
本篇文章主要介紹了AngularJS ui-router (嵌套路由)實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
這篇文章主要為大家詳細介紹了AngularJS Controller的作用域，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
directive（指令）是angular的一個非常強大又有用的功能，它相當于實現了組件化的概念，我們可以通過它公共地自定義DOM元素或CLASS類或ATTR屬性，并且在這基礎上進行操作scope、綁定事件等等2017-05-05
本文主要介紹AngularJs expression,這里整理了詳細的資料，并附示例代碼，有興趣的小伙伴可以參考下2016-09-09