JS多級樹結構寫法

效果：

一、布局：

<

div 
class
="three_tree"
>
<
div 
class
="tree_title_cut"
>
<
span
>名稱
span
>
<
span
>編碼
span
>
<
span
>資料域
span
>
div>
<
div 
class
="list_group_li click_add_on"
>
div>
div>

* .two .three_tree .three_tree .tree_title_cut .three_tree .tree_title_cut span .three_tree .tree_title_cut span:first-child.list_group_li .list .list_group_li .list.on .list_group_li .list:hover .list_group_li .list.on:hover .list_group_li .list span .list_group_li .list span:first-child.list_group_li .two .list_group_li >.two .list_group_li .list_box .arrow_three .arrow_three.on .arrow_three:hover

看了一下，當children為空時，就是沒有下一級。所以可以直接判斷children是否為空並迴圈新增資料。

var data =[,,

]},]},
]},]},
,]},,
];

寫乙個方法threetree，第乙個引數array是資料，第二個引數html是存放資料的容器，第三個引數show是判斷是否預設展示全不列表(不傳或者false就只展示第一級內容)。

判斷陣列children如果不為空，即有下級內容，就執行threetree方法並傳入children的資料，如果一直有children，就一直執行，否則傳入沒有帶三角符的列表。

function

threetree(array,html,show)  
else
}//是否展示全部
if(show) 
}threetree(data,$(".list_group_li"),false
);$(
function
());
//多級樹 toggle
$(document).on('click', '.click_add_on .arrow_three', function
() else
});});

遇到這種需求，用vue或者angular來處理會方便很多......那我還用js?因為有些人還不會用vue或者angular啊哈哈哈哈！

六、demo**：

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>多級樹
title
>
<
style 
type
="text/css"
>
*.two
.three_tree
.three_tree .tree_title_cut
.three_tree .tree_title_cut span
.three_tree .tree_title_cut span:first-child
.list_group_li .list
.list_group_li .list.on
.list_group_li .list:hover
.list_group_li .list.on:hover
.list_group_li .list span
.list_group_li .list span:first-child
.list_group_li .two
.list_group_li >.two
.list_group_li .list_box
.arrow_three
.arrow_three.on
.arrow_three:hover
style
>
head
>
<
body
>
<
div 
class
="three_tree"
>
<
div 
class
="tree_title_cut"
>
<
span
>名稱
span
>
<
span
>編碼
span
>
<
span
>資料域
span
>
div>
<
div 
class
="list_group_li click_add_on"
>
div>
div>
<
script 
src=""
>
script
>
<
script
>
vardata =[,,
]},]},
]},]},
,]},,
];function
threetree(array,html,show)  
else
}//是否展示全部
if(show) 
}threetree(data,$(
".list_group_li"),
false
);        $(
function
());
//多級樹 toggle
$(document).on(
'click', 
'.click_add_on .arrow_three', 
function
() else
});});
script
>
body
>
html
>

js 樹結構篩選

問題描述，樹型資料，現在要做查詢，當子節點滿足條件時，返回其父節點直到其跟節點，同時也要把當前，子節點的所有孩子節點返回，最終返回的結構還是一顆樹。如下 var productlist var productfilter function list,name const listlength lis...

js陣列轉化成樹結構

話不多說，直接上 吧 1.首先原有的陣列資料let data 2.想要轉換成的資料型別let treedata 3實現轉換的步驟function arraytotree data 3.第一步轉換,建立id和這個元素的鍵值關係，方便一步找到這個元素 比如我想要找到id為1的元素，就需要去遍歷陣列，這樣...

繪製樹結構

樹的表示方法有雙親表示法 孩子表示法 雙親孩子表示法 孩子兄弟表示法，具體請參考其中前三種基於陣列，最後一種基於鍊錶。我定義的數節點資料結構為 typedef struct treenode treenode,ptreenode 也就是孩子兄弟表示法，附加乙個指向父節點的指標。參考上圖，發現第乙個子...