算法 --- 遞歸實現多級樹展開結構

說明

先根據數據渲染,然后再實現事件

渲染

在項目中,經常會給出一個深度不確定的數組,數字結構如下:

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){// 含有孩子元素, 應該渲染成 <ul><li>a<ul><li>a1</li></ul></li></ul>的結構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('可以展開');
}

改變當前span中的內容

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;
}

html代碼

<!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>

js代碼

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}// 渲染dom結構$('.tree').html(g(data))// 渲染完成后,給li下面的span添加點擊事件$('.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('不能展開')}})})

參考

源代碼

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/250329.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/250329.shtml
英文地址，請注明出處：http://en.pswp.cn/news/250329.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！