JavaScript：使用遞迴構建樹型選單

阿新 • • 發佈：2020-07-25

使用遞迴函式將扁平資料轉為樹型結構，並渲染到頁面

效果圖：

程式碼：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>遞迴函式處理資料</title>
</head>

<body>
  <div class="nav" style="background-color: pink;">
  </div>
  <script>
    var 
 data = [
      { id: 1, name: '衣服', pid: 0 },
      { id: 2, name: '褲子', pid: 0 },
      { id: 3, name: '外套', pid: 1 },
      { id: 4, name: '短褲', pid: 2 },
      { id: 5, name: '風衣', pid: 3 }
    ]
    function filterArray(data, parent){
      let temp = []
      for (let i = 0; i < data.length; i++) {
         
if (data[i].pid === parent) {
          temp.push(data[i])
          data[i].children = filterArray(data, data[i].id) //返回值是一個數組，又賦值給data[i].children
        }
      }
      return temp
    }
    let tree=filterArray(data,0)

    let nav = document.querySelector('.nav');
    function setDomTree(data, node) {
      let ul
       
for (let i = 0; i < data.length; i++) {
          ul = document.createElement('ul')
          let li = document.createElement('li')
          li.innerHTML = data[i].name
          node.appendChild(ul)
          ul.appendChild(li)
          if (data[i].children.length !== 0) {
              let element = setDomTree(data[i].children, ul)
              ul.appendChild(element)
          }
      }
      return ul
    }
    setDomTree(tree,nav)
  </script>
</body>

</html>

JavaScript：使用遞迴構建樹型選單

使用遞迴函式將扁平資料轉為樹型結構，並渲染到頁面效果圖：程式碼： <!DOCTYPE html>

使用TreeView樹型選單欄（遞迴呼叫資料庫自動建立選單）

在做工控上位機專案時，當專案過於龐大，細分的流程就很多，需要管理的頁面也就會增加很多，這時可以使用.NET控制元件TreeView進行頁面的切換管理，並且實現TreeView間的互相切換。Intouch和Wonderware可以匯入並使

如何實現java遞迴處理許可權管理選單樹或分類

這篇文章主要介紹瞭如何實現java遞迴處理許可權管理選單樹或分類,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

JavaScript圖形例項：遞迴生成樹

觀察自然界中樹的分叉，一根主幹生長出兩個側幹，每個側幹又長出兩個側幹，以此類推，便生長出疏密有致的結構。這樣的生長結構，使用遞迴演演算法可以模擬出來。

JavaScript動畫例項：遞迴分形圖動態展示

在“JavaScript圖形例項：SierPinski三角形” 和“JavaScript圖形例項：Levy曲線及其變形”等文章中我們介紹了通過遞迴生成分形圖形的方法。我們可以將繪製的分形圖形每隔一定的時間間隔後，增加

Java遞迴執行的機制：遞迴的微觀解讀圖文分析

本文講述了Java遞迴執行的機制：遞迴的微觀解。分享給大家供大家參考，具體如下：

AcWing 遞迴實現排列型列舉 dfs

預備知識：1~n這n個數的全排列共有2^n種。　　證明：第一個位置有n種情況，第二個位置有（n-1）種情況，最後一個位置有1種情況，n * (n - 1) * ... * 1 = n!搜尋順序：從前往後遍歷每個位置，判斷這個位置放哪個數。

C#資料結構與算法系列（十二）：遞迴（Recursion）

1.介紹簡單的說：遞迴就是方法自己呼叫自己，每次呼叫時傳入不同的變數，遞迴有助於程式設計者解決複雜的問題，同時也讓程式碼變得整潔

C#資料結構與算法系列（十四）：遞迴——八皇后問題（回溯演演算法）

1.介紹八皇后問題，是一個古老而著名的問題，是回溯演演算法的經典案例，該問題是國際西洋棋棋手馬克斯.貝瑟爾於1848年提出：在8×8格的國際象棋上擺放八個皇后，使其不能互相攻擊，即

第23講：遞迴是神馬

一相關概念 1 定義：簡單點來說，就是一個函式直接或間接呼叫自身的一種方法，它通常把一個大型複雜的問題層層轉化為一個與原問題相似的規模較小的問題來求解。

Javascript如何遞迴遍歷本地資料夾

列印本地temp folder所有的檔案及最後修改時間: <html> <head> <script language=\"javascript\">

面試題24：反轉單鏈表（解法二：遞迴法）

反轉單鏈表的兩種方法今天看了帥地的第二版資料，突然發現單鏈表的反轉居然還可以用遞迴來做，太妙了吧！

遞迴實現指數型列舉

題目描述從 1~n 這 n 個整數中隨機選取任意多個，輸出所有可能的選擇方案。

遞迴實現組合型列舉

題目描述從 1~n 這 n 個整數中隨機選出 m 個，輸出所有可能的選擇方案。輸入格式

併發程式設計（執行緒）——驗證GIL鎖，GIL與普通互斥鎖的區別，io密集型和計算密集型，死鎖現象（解決方式：遞迴鎖），Semaphore訊號量，Event事件，執行緒queue，多程序實現tcp服務端併發，執行緒池&程序池

一、驗證GIL鎖的存在方式 from threading import Thread from multiprocessing import Process def task():

演算法基礎：遞迴演算法

1、遞迴演算法定義遞迴演算法是將重複問題分解為同類的子問題而解決問題的方法，其核心思想是分治策略。

【oracle】-函式：遞迴函式（start with）...

0、前言我們可能會碰到這種需求：一個表的欄位為id，pid（父id）；我們需要通過id找到他的所有父節點。

遞迴實現排列型列舉

題目描述把 1~n 這 n 個整數排成一行後隨機打亂順序，輸出所有可能的次序。

layui 樹型選單繫結資料

側邊選單欄頁面： 1  2<div class=\"container\"> 3<div class=\"logo\"><a href=\"/Home/Index\" style=\"color:aquamarine\"></a></div>

專題：遞迴

不同函式之間互相呼叫 #include <stdio.h> void f(); void g(); void k(); int main() { f(); return 0;