js無限分級 樹 原生js生成無限級樹形選單

2021-10-13 08:08:49 字數 1194 閱讀 9473

設計思路:

要生成選單的源資料往往是乙個樹形資料結構(若不是也可以轉換成樹形結構),(那我們一起寫部落格吧)因為源資料結構和目標選單結構都為樹形結構,所以其實我們要做的就是資料結構的轉譯,即將js樹形資料轉換為 ul, li 拼接成的樹形選單。在這裡我們通過樹的深度優先遍歷方式來完成這次轉義操作。

結構(轉義)對映關係說明:

迭代樹形資料時,樹形結構資料的每個同層級別的每條資料轉換成乙個 li標籤包裹的選單項(新增class為menu-item標識),當遇到childrens項時,當前項資料用 li 標籤包裹(新增class為menu標識),同時在該li標籤後面新增ul標籤作為下一級選單包裹項,迭代childrens作為上述ul標籤的子選單項,對childrens子元素的操作同上述描述的操作。

簡單總結就是樹的每條資料都轉換為li標籤內容,每個childrens都轉換為ul標籤。

以下我們來完成對上述描述**實現

1,js樹形資料

1 var menulist =[2 ,8 ,11 ,19 ,24 ],25 },26 29 ]30 },31 ,42 ,47 ,52 ,57 ,62 67 ]68 },69 ,77 ,82 ,87 ,92 ,97 102 ]103 },104 ]105 },106 ]

treedata

2,迭代生成樹形選單

1 //生成dom tree

2 function generatedomtree(treedata, config =) )19 var childrens =menu[childrenskey]20 //子節點存在

23 var urldom = generatedomele('ul') //生成下一級選單

24 lidom.classlist.add('menu') //新增選單標識

25 if (!show) else else12 }13 }, false)

open or close

4,相關**解釋說明

4-1,**中用到的自定義方法**片段

1 //生成dom節點

2 functiongeneratedomele(tagname, property) 4 var ele =document.createelement(tagname)5 for (var key inproperty) 8 returnele9 }

snippet code

4-2,效果圖

4-3,生成的dom結構

js無限分級 樹 js遞迴,無限分級樹形摺疊選單

效果圖 mysql表結構形式資料 data資料 第一級是id 0 第二級是id 1,name 廣東 pid 0 第二級是id 5,name 廣西 pid 0 第 是id 6,name 玉林 pid 5 第 是id 7,name 北流 pid 6 var data js部分 var menu menu...

PHP無限極分類生成樹方法,無限分級

你還在用浪費時間又浪費記憶體的遞迴遍歷無限極分類嗎,看了該篇文章,我覺得你應該換換了。這是我在oschina上看到的一段非常精簡的php無限極分類生成樹方法,巧在引用,整理分享了。php function generatetree items else return tree items array...

PHP 無限級分類生成樹方法

你還在用浪費時間又浪費記憶體的遞迴遍歷無限極分類嗎,看了該篇文章,我覺得你應該換換了。這是我在oschina上看到的一段非常精簡的php無限極分類生成樹方法,巧在引用,整理分享了。function generatetree items else return tree items array 1 a...