生活随笔
收集整理的這篇文章主要介紹了
算法 --- 递归实现多级树展开结构
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
說明
渲染
- 在項目中,經常會給出一個深度不確定的數組,數字結構如下:
data
= [{name
: 'a', child
:[{name
: 'a1'},{name
: 'a2', child
: [{name
:'a21'}]}]},{name
: 'b'}
]
<ul><li>a
<ul><li>a1
</li><li>a2
<ul><li>a21
</li></ul></li></ul></li><li>b
</li>
</ul>
$(function(){var str
= '<ul>';for(var i
=0; i
< data
.length
; i
++){str
+= `<li>${data[i].name}</li>`}str
+= '</ul>';$('.tree').html(str
)
})
此時頁面結構如下:
<div class="tree"><ul><li>a
<ul><li>a1
</li><li>a2
</li></ul></li> <li>b
</li></ul>
</div>
// 首先判斷第一級是否含有第二級元素
if(data[i].child){var str = '<ul>';for(let var j =0; i<data.[i].child.length; j++){str += `<li>${data[i].child[j].name}</li>`}str += "</ul>";$('ul').html(str)
}
- 可以發現.第二級的過程和第一級的過程是一樣的.因此嘗試使用遞歸如下:
$(function(){function f(data
){var str
= '<ul>'for(let i
=0; i
<data
.length
; i
++){if(data
[i
].child
){str
+= `<li>${data[i].name}`str
+= f(data
[i
].child
)str
+= "</li>"} else {str
+= `<li>${data[i].name}</li>`}}str
+= "</ul>"return str
}$(".lists").html(f(data
))
})
添加事件
- 有時候左邊的導航欄需要可以點擊…
- 即,點擊左側的按鈕, 導航欄可以進行收縮…
- 實現很簡單.
- 在每個li下面添加一個span標簽,利用jQuery的隱式迭代規則,給每個span標簽添加一個點擊事件.當鼠標點擊上去的時候,判斷當前span元素的兄弟元素是否有子元素
- 如果有就證明當前是可以展開的,否則不能展開
- 如果可以展開,則獲取span中的內容.如果是-, 則將其變為+并隱藏它的兄弟元素,
- 如果是+,則當前的span變為-,并顯示其兄弟元素.
你可能用到的API
- 監聽類tree下所有span的點擊事件
- 獲取當前被點擊的對象
#
('.tree li span').click(function(){console
.log($(this))
})
- 獲取當前元素的兄弟元素ul
- 判斷該兄弟元素(ul)是否為空
$(this).siblings('ul')
if(this.siblings('ul').length
== 0){console
.log('不能展開')
} else{console
.log('可以展開');
}
if($(this).html() == '-'){$(this).html('+')
} else {$(this).html('-')
}
總體代碼
ul li span {display: inline-block
;width: 15px
;height: 15px
;color: red
;margin-right: 10px
;border: 1px solid #1890ff
;line-height: 15px
;text-align: center
;vertical-align: middle
;border-radius: 50%
;cursor: default
;
}li {list-style-type: none
;
}li span:hover{cursor: pointer
;
}
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>無限級目錄樹
</title><link rel="stylesheet" href="public/css/15.css" /><script type="text/javascript" src="public/js/jquery.min.js"></script></head><body><div class="tree"></div><script type="text/javascript" src="public/js/15.js"></script></body>
</html>
data
= [{name
: 'a', child
:[{name
: 'a1'},{name
: 'a2', child
: [{name
:'a21'}]},{name
: 'a3', child
: [{name
: 'a31'},{name
: 'a32'},{name
: 'a33'},{name
: 'a34', child
: [{name
: 'a341'},{name
: 'a342'},{name
: 'a343'},{name
: 'a344'}]}]}]},{name
: 'b'},{name
: 'c'}
]
$(function() {function g(data
) {var str
= '<ul>'for (var i
= 0; i
< data
.length
; i
++) {if (data
[i
].child
) {str
+= `<li><span>-</span>${data[i].name}`str
+= g(data
[i
].child
);str
+= "</li>"} else {str
+= `<li><span>-</span>${data[i].name}</li>`}}str
+= '</ul>'return str
}$('.tree').html(g(data
))$('.tree li span').click(function(){if($(this).siblings('ul').length
>0){console
.log('可以展開')if($(this).html() == '-'){$(this).html('+')$(this).siblings('ul').hide()} else {$(this).html('-');$(this).siblings('ul').show();}} else {console
.log('不能展開')}})})
參考
源代碼
總結
以上是生活随笔為你收集整理的算法 --- 递归实现多级树展开结构的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
