生活随笔
收集整理的這篇文章主要介紹了
算法 --- 递归实现多级树展开结构
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
說明
- 先根據(jù)數(shù)據(jù)渲染,然后再實(shí)現(xiàn)事件
渲染
- 在項(xiàng)目中,經(jīng)常會(huì)給出一個(gè)深度不確定的數(shù)組,數(shù)字結(jié)構(gòu)如下:
data
= [{name
: 'a', child
:[{name
: 'a1'},{name
: 'a2', child
: [{name
:'a21'}]}]},{name
: 'b'}
]
- 要求將數(shù)組渲染成對應(yīng)的目錄結(jié)構(gòu), 結(jié)構(gòu)如下:
<ul><li>a
<ul><li>a1
</li><li>a2
<ul><li>a21
</li></ul></li></ul></li><li>b
</li>
</ul>
- 思路,先對數(shù)組中的第一級數(shù)據(jù)顯示出來
$(function(){var str
= '<ul>';for(var i
=0; i
< data
.length
; i
++){str
+= `<li>${data[i].name}</li>`}str
+= '</ul>';$('.tree').html(str
)
})
此時(shí)頁面結(jié)構(gòu)如下:
<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)
}
- 可以發(fā)現(xiàn).第二級的過程和第一級的過程是一樣的.因此嘗試使用遞歸如下:
$(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
))
})
添加事件
- 有時(shí)候左邊的導(dǎo)航欄需要可以點(diǎn)擊…
- 即,點(diǎn)擊左側(cè)的按鈕, 導(dǎo)航欄可以進(jìn)行收縮…
- 實(shí)現(xiàn)很簡單.
- 在每個(gè)li下面添加一個(gè)span標(biāo)簽,利用jQuery的隱式迭代規(guī)則,給每個(gè)span標(biāo)簽添加一個(gè)點(diǎn)擊事件.當(dāng)鼠標(biāo)點(diǎn)擊上去的時(shí)候,判斷當(dāng)前span元素的兄弟元素是否有子元素
- 如果有就證明當(dāng)前是可以展開的,否則不能展開
- 如果可以展開,則獲取span中的內(nèi)容.如果是-, 則將其變?yōu)?#43;并隱藏它的兄弟元素,
- 如果是+,則當(dāng)前的span變?yōu)?,并顯示其兄弟元素.
你可能用到的API
- 監(jiān)聽類tree下所有span的點(diǎn)擊事件
- 獲取當(dāng)前被點(diǎn)擊的對象
#
('.tree li span').click(function(){console
.log($(this))
})
- 獲取當(dāng)前元素的兄弟元素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('不能展開')}})})
參考
源代碼
總結(jié)
以上是生活随笔為你收集整理的算法 --- 递归实现多级树展开结构的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
