JavaScript遞歸算法生成樹形菜單

來源：懂視網責編：小OO 時間：2020-11-27 22:32:42

JavaScript遞歸算法生成樹形菜單

本文實例為大家分享了js生成樹形菜單的具體代碼，供大家參考，具體內容如下：1、最終效果圖（這里僅為實現算法，并加載至頁面，不做任何css界面優化）。注釋：本示例包含三級目錄菜單，但實際上可支持N級（可使用該代碼自行測試）。2、數據源；菜單信息一般來源于數據庫中數據表，且為自連接表，其中包含主要字段（主鍵，菜單名稱，父級id）。本示例在前端頁面中使用對象數組模擬從數據庫獲取菜單信息。

推薦度：

點擊下載本文 文檔為doc格式

導讀本文實例為大家分享了js生成樹形菜單的具體代碼，供大家參考，具體內容如下：1、最終效果圖（這里僅為實現算法，并加載至頁面，不做任何css界面優化）。注釋：本示例包含三級目錄菜單，但實際上可支持N級（可使用該代碼自行測試）。2、數據源；菜單信息一般來源于數據庫中數據表，且為自連接表，其中包含主要字段（主鍵，菜單名稱，父級id）。本示例在前端頁面中使用對象數組模擬從數據庫獲取菜單信息。

本文實例為大家分享了js生成樹形菜單的具體代碼，供大家參考，具體內容如下

1、最終效果圖（這里僅為實現算法，并加載至頁面，不做任何css界面優化）

注釋：本示例包含三級目錄菜單，但實際上可支持N級（可使用該代碼自行測試）

2、數據源

菜單信息一般來源于數據庫中數據表，且為自連接表，其中包含主要字段（主鍵，菜單名稱，父級id）；

本示例在前端頁面中使用對象數組模擬從數據庫獲取菜單信息；

var menuArry = [
{ id: 1, name: "辦公管理", pid: 0 },
{ id: 2, name: "請假申請", pid: 1 },
{ id: 3, name: "出差申請", pid: 1 },
{ id: 4, name: "請假記錄", pid: 2 },
{ id: 5, name: "系統設置", pid: 0 },
{ id: 6, name: "權限管理", pid: 5 },
{ id: 7, name: "用戶角色", pid: 6 },
{ id: 8, name: "菜單設置", pid: 6 },
];

注釋：id——菜單主鍵id；name——菜單名稱；pid——父級id

3、程序設計

菜單信息一般來源

//菜單列表html
 var menus = '';
 
 //根據菜單主鍵id生成菜單列表html
 //id：菜單主鍵id
 //arry：菜單數組信息
 function GetData(id, arry) {
 var childArry = GetParentArry(id, arry);
 if (childArry.length > 0) {
 menus += '<ul>';
 for (var i in childArry) {
 menus += '<li>' + childArry[i].name;
 GetData(childArry[i].id, arry);
 menus += '</li>';
 }
 menus += '</ul>';
 }
 }
 
 //根據菜單主鍵id獲取下級菜單
 //id：菜單主鍵id
 //arry：菜單數組信息
 function GetParentArry(id, arry) {
 var newArry = new Array();
 for (var i in arry) {
 if (arry[i].pid == id)
 newArry.push(arry[i]);
 }
 return newArry;
 }

注釋：本示例菜單使用ul無序列表演示，menus變量為最終生成的菜單html

4、運行

GetData(0, menuArry)
$("body").append(menus);

注釋：GetData(0, menuArry)，0——頂級菜單主鍵

5、完整代碼

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title></title>
 <script src="jquery-1.8.3.min.js"></script>
</head>
<body>
 
 <script type="text/javascript">
 $(function () {
 var menuArry = [
 { id: 1, name: "辦公管理", pid: 0 },
 { id: 2, name: "請假申請", pid: 1 },
 { id: 3, name: "出差申請", pid: 1 },
 { id: 4, name: "請假記錄", pid: 2 },
 { id: 5, name: "系統設置", pid: 0 },
 { id: 6, name: "權限管理", pid: 5 },
 { id: 7, name: "用戶角色", pid: 6 },
 { id: 8, name: "菜單設置", pid: 6 },
 ];
 
 GetData(0, menuArry)
 $("body").append(menus);
 });
 
 //菜單列表html
 var menus = '';
 
 //根據菜單主鍵id生成菜單列表html
 //id：菜單主鍵id
 //arry：菜單數組信息
 function GetData(id, arry) {
 var childArry = GetParentArry(id, arry);
 if (childArry.length > 0) {
 menus += '<ul>';
 for (var i in childArry) {
 menus += '<li>' + childArry[i].name;
 GetData(childArry[i].id, arry);
 menus += '</li>';
 }
 menus += '</ul>';
 }
 }
 
 //根據菜單主鍵id獲取下級菜單
 //id：菜單主鍵id
 //arry：菜單數組信息
 function GetParentArry(id, arry) {
 var newArry = new Array();
 for (var i in arry) {
 if (arry[i].pid == id)
 newArry.push(arry[i]);
 }
 return newArry;
 }
 </script>
</body>
</html>

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

JavaScript遞歸算法生成樹形菜單

推薦度：

點擊下載本文 文檔為doc格式

標簽：菜單 js javascript

熱門焦點

JavaScript遞歸算法生成樹形菜單

JavaScript遞歸算法生成樹形菜單

JavaScript遞歸算法生成樹形菜單

最新推薦

猜你喜歡

熱門推薦