本文實例為大家分享了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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
