樹形結構js_如何用javascript 實現樹形結構菜單可伸縮有節點請高手指教！

Ⅰ 如何用js實現select下拉框里是樹形結構，可復選，select框中傳復選所有值如下圖所示。

首先說樹形結構，國內有個開源的js控制項叫zTree，支持復選。
然後下拉框你可能需要自己做一個（html輸入框+右邊的一個圖標按鈕）。
最後，用一個隱藏的div把樹形結構包起來，這個div設置成絕對定位，在下拉框右側選擇按鈕的單擊事件處理函數里，顯示這個隱藏的div，並把它的位置設置成在下拉框下面就行了。
思路就是這樣，要麼樓主可以找找有沒有其他更現成的控制項，extjs4我記得有類似的，但是他的復選功能不太符合中國習慣，也許現在的版本改好了，你可以查查試試看。

Ⅱ js的樹形結構怎麼實現

這個問題，我建議你去下載下樹形菜單。網上已經實現的js很多，下載下來一看就明白了，

Ⅲ JS樹結構數據的遍歷

title: JS樹結構數據的遍歷
date: 2022-04-14
description: 針對項目中出現樹形結構數據的時候，我們怎樣去操作他

項目中我們會經常出現對樹形結構的遍歷、查找和轉換的場景，比如說DOM樹、族譜、社會機構、組織架構、許可權、菜單、省市區、路由、標簽等等。那針對這些場景和數據，我們又如何去遍歷和操作，有什麼方式或者技巧可以簡化我們的實現思路。下面我們將針對常規出現的場景去總結一下我們的遍歷方式

樹的特點
1、每個節點都只有有限個子節點或無子節點；
2、沒有父節點的節點稱為根節點；
3、每一個非根節點有且只有一個父節點；
4、除了根節點外，每個子節點可以分為多個不相交的子樹；
5、樹裡面沒有環路

下面的圖片表示一顆樹

在下面的JS中我們由多棵樹組成我們的數據

在這數據中我們如何評判數據是否為葉節點（也就是最後一級），我們每個節點都會存在children屬性，如果不存在children屬性或者children不是一個數組或者children為數組且長度為0我們則認為他是一個葉節點

我們針對樹結構的操作離不開遍歷，遍歷的話又分為廣度優先遍歷、深度優先遍歷。其中深度優先遍歷可以通過遞歸和循環的方式實現，而廣度優先遍歷的話是非遞歸的

從上往下對每一層依次訪問，在每一層中，從左往右（也可以從右往左）訪問結點，訪問完一層就進入下一層，直到沒有結點可以訪問為止。即訪問樹結構的第n+1層前必須先訪問完第n層。

簡單的說，BFS是從根節點開始，沿著樹的寬度遍歷樹的節點。如果所有節點均被訪問，則演算法中止。

所以我們的實現思路是，維護一個隊列，隊列的初始值為樹結構根節點組成的列表，重復執行以下步驟直到隊列為空：
取出隊列中的第一個元素，進行訪問相關操作，然後將其後代元素（如果有）全部追加到隊列最後。

深度優先搜索演算法（英語：Depth-First-Search，DFS）是一種用於遍歷或搜索樹或圖的演算法。這個演算法會盡可能深的搜索樹的分支。當節點v的所在邊都己被探尋過，搜索將回溯到發現節點v的那條邊的起始節點。這一過程一直進行到已發現從源節點可達的所有節點為止。如果還存在未被發現的節點，則選擇其中一個作為源節點並重復以上過程，整個進程反復進行直到所有節點都被訪問為止

1、先序遍歷
訪問子樹的時候，先訪問根再訪問根的子樹

2、後序遍歷
訪問子樹的時候，先訪問子樹再訪問根

1、先序遍歷
先序遍歷與廣度優先循環實現類似，要維護一個隊列，不同的是子節點不追加到隊列最後，而是加到隊列最前面

2、後序遍歷
後序遍歷就略微復雜一點，我們需要不斷將子樹擴展到根節點前面去，執行列表遍歷，並且通過一個臨時對象維護一個id列表，當遍歷到某個節點如羨大果它沒有子節點或者它本身已經存在於我們的臨時id列表，則執行訪問操笑高作，否則繼續擴展子節點到當前節點前面

對於樹結構的遍歷操作，其實遞歸是最基礎，也是最容易理解的。遞歸本身就是循環的思想，所以可以用循環來改寫遞碰派尺歸,以上的方式在項目中已經廊括了大部分的場景了，我們在日常開發中可以根據場景或者需要去選擇我們的遍歷方式，或者基於此對他進行調整和優化，至於每種方式的空間復雜度和時間復雜度我們在這個地方就不去嘗試了，各位感興趣可以自己去驗證。

廣度優先搜索

樹的遍歷

深度優先搜索

圖文詳解兩種演算法：深度優先遍歷（DFS）和廣度優先遍歷（BFS）

二叉樹遍歷（前序，後序，中序，層次）遞歸與迭代實現javaScript

JS樹結構操作:查找、遍歷、篩選、樹和列表相互轉換

Ⅳ js樹形結構如何從最深層往上匹配

一、樹結構

定義一顆樹，JS中常見的樹形數據結構如下，children屬性對應的是子樹

let tree = [
{
id: '1',
name: '節點1',
children: [
{
id: '1-1',
name: '節點1-1'
}
]
},
{
id: '2',
name: '節點2',
children: [
{
id: '2-1',
name: '節點2-1'
},
{
id: '2-2',
name: '節點2-2',
children: [
{
id: '2-2-1',
name: '節點2-2-1'
}
]
}
]
},
{
id: '3',
name: '節點3'
}
]
二、深度優先遍歷（DFS）

1、遞歸實現

function treeIterator(tree, func) {
tree.forEach((node) => {
func(node)
node.children && treeIterator(node.children, func)
})
}
實現邏輯簡述：定義treeIterator函數，傳入tree（樹）和func（回調函數）兩個參數，遍歷tree數組，執行回調函數，如果當前節點存在children，則遞歸調用。

函數調用驗證：調用treeIterator函數，傳入上文定義好的樹結構數組，列印出每個節點的name值。

treeIterator(tree, (node) => {
console.log(node.name)
})
控制台列印結果如下：

2、循環實現

function treeIterator(tree, func) {
let node, curTree = [...tree]
while ((node = curTree.shift())) {
func(node)
node.children && curTree.unshift(...node.children)
}
}
實現邏輯簡述：

（1）定義node作為當前節點，curTree為傳入的樹（不影響原數組tree）；

（2）執行while循環，curTree數組第一個元素從其中刪除，並返回第一個元素賦值給node；

（3）①執行回調函數；②如果當前節點存在子樹，則追加到curTree數組的開頭，繼續執行循環，直到curTree沒有元素為止。

函數調用驗證：參考上述遞歸實現驗證，方式和結果一致。

三、廣度優先遍歷（BFS）

function treeIterator(tree, func) {
let node, curTree = [...tree]
while ((node = curTree.shift())) {
func(node)
node.children && curTree.push(...node.children)
}
}
實現邏輯簡述：和上述深度優先遍歷的循環實現差不多。區別在於如果當前節點存在子樹，則追加到list數組的末尾。

Ⅳ 如何用javascript 實現樹形結構菜單，可伸縮，有節點。請高手指教！

這個應該適合你：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" href="http://123.jialulu.com/css/tree.css" type="text/css" />
<style type="text/css">
a {text-decoration:none;}
a,a:visited {color:#000;background:inherit;}
body {margin:0;padding:20px;font:12px tahoma,宋體,sans-serif;}
dt {font-size:22px;font-weight:bold;margin:0 0 0 15px;}
dd {margin:0 0 0 15px;}
h4 {margin:0;padding:0;font-size:18px;text-align:center;}
p {margin:0;padding:0 0 0 18px;}
p a,p a:visited {color:#00f;background:inherit;}
/*Temp CSS for View Demo*/
#CNLTreeMenu {float:left;width:249px;border:1px solid #99BEEF;background:#D2E4FC;color:inherit;margin:3px;padding:3px;}
#CNLTreeMenu {padding-bottom:15px;}
</style>
<title>無限級樹形菜單</title>
</head>
<body>
<div class="CNLTreeMenu" id="CNLTreeMenu">
<h4>CNL Tree Menu1</h4>
<p><a id="AllOpen" href="#" onClick="MyCNLTreeMenu.SetNodes(0);Hd(this);Sw('AllClose');">全部展開</a><a id="AllClose" href="#" onClick="MyCNLTreeMenu.SetNodes(1);Hd(this);Sw('AllOpen');" style="display:none;">全部折疊</a></p>
<ul>
<li class="Opened"><a href="http://www.jialulu.com">Zzsky.Cn</a>
<ul>
<li><a href="#1">技術區</a>
<ul>
<li><a href="#">網頁技術</a>
<ul>
<li class="Child"><a href="#">JavaScript</a></li>

<li class="Child"><a href="#">HTML/XHTML/CSS</a></li>
<li class="Child"><a href="#">Ajax</a></li>
<li class="Child"><a href="#">網頁製作工具</a></li>
<li class="Child"><a href="#">設計/圖形</a></li>
<li class="Child"><a href="#">Flash/多媒體</a></li>
<li class="Child"><a href="#">VML/Web3D</a></li>
</ul>
</li>

<li><a href="#">Web編程</a>
<ul>
<li class="Child"><a href="#">Java</a></li>

<li class="Child"><a href="#">.Net</a></li>
<li class="Child"><a href="#">ASP/VBScript</a></li>
<li class="Child"><a href="#">PHP</a></li>
<li class="Child"><a href="#">Perl/Python</a></li>
<li class="Child"><a href="#">Web綜合/開源</a></li>
</ul>
</li>

<li><a href="#">資料庫</a>
<ul>
<li class="Child"><a href="#">Access/SQLServer</a></li>

<li class="Child"><a href="#">MySQL/PostgreSQL</a></li>
<li class="Child"><a href="#">Oracle/DB2/Sybase</a></li>
</ul>
</li>

<li><a href="#">伺服器</a>
<ul>
<li class="Child"><a href="#">Windows/IIS</a></li>

<li class="Child"><a href="#">Unix/Linux/Apache</a></li>
<li class="Child"><a href="#">應用伺服器</a></li>
</ul>
</li>

</ul>
</li>

<li><a href="#1">二級目錄</a>
<ul>
<li><a href="#">三級目錄</a>
<ul>
<li><a href="#">四級目錄</a>
<ul>
<li><a href="#">五級目錄</a>
<ul>
<li><a href="#">......</a>
<ul>
<li><a href="#">第n級目錄</a>
<ul>
<li class="Child"><a href="#">葉結點1</a></li>

<li class="Child"><a href="#">葉結點2</a></li>
<li class="Child"><a href="#">葉結點3</a></li>
</ul>
</li>

</ul>
</li>

</ul>
</li>

</ul>
</li>

</ul>
</li>

</ul>
</li>

<li><a href="#1">二級目錄</a>
<ul>
<li><a href="#">三級目錄</a>
<ul>
<li><a href="#">四級目錄</a>
<ul>
<li><a href="#">五級目錄</a>
<ul>
<li><a href="#">......</a>
<ul>
<li><a href="#">第n級目錄</a>
<ul>
<li class="Child"><a href="#">葉結點1</a></li>

<li class="Child"><a href="#">葉結點2</a></li>
<li class="Child"><a href="#">葉結點3</a></li>
</ul>
</li>

</ul>
</li>

</ul>
</li>

</ul>
</li>

</ul>
</li>

</ul>
</li>

</ul>
</li>

</ul>
</div>


<script type="text/javascript">

</script>
</body>
</html>

Ⅵ 請問這種樹形結構的導航欄用html或者js怎麼實現

下面是最基本的框架，內容和樣式你需要自己調整

<title></title>
<style type="text/css">
#tree {
width: 150px;
}
#tree, #tree ul {
list-style: none; margin: 0; padding: 0; padding: 10px;
}
#tree li {
border: 1px solid #00f; padding: 10px; cursor: pointer;
}
#tree ul {
display: none;
}
</style>
<script type="text/javascript">
window.onload = function() {
var tree = document.getElementById("tree");
var lis = tree.getElementsByTagName("li");
for(var i = 0; i < lis.length; i++) {
(function(a) {
lis[a].onclick = function() {
if(typeof this.getElementsByTagName("ul") !== null) {
var ul_first = this.getElementsByTagName("ul")[0];
if(ul_first.style.display == "block")
ul_first.style.display = "none";
else
ul_first.style.display = "block";
}
};
})(i);
}
};
</script>
</head>
<body>
<ul id="tree">
<li>菜單一
<ul>
<li>1-1</li><li>1-2</li><li>1-3</li><li>1-4</li>
</ul>
</li>
<li>菜單二
<ul>
<li>2-1</li><li>2-2</li><li>2-3</li><li>2-4</li>
</ul>
</li>
<li>菜單三
<ul>
<li>3-1</li><li>3-2</li><li>3-3</li><li>3-4</li>
</ul>
</li>
</ul>
</body>
</html>

導航:首頁 > 編程語言 > 樹形結構js

樹形結構js

與樹形結構js相關的資料

友情鏈接