最近在做一個項目,需要利用從后台傳過來的數據渲染一個樹形菜單:主要是利用遞歸算法一級一級向下渲染的。然后我通過查找案例,資料完成了這個功能,但還是想把它寫出來。以方便以后用得着。
先看數據結構(自己模擬的一個菜單欄jJSON):
var json = { "success": true, "code": "200", "data": [{ "name": "1", "icon": "icon-yuyue", "userLevel": "我的預約", "list": [{ "name": "2", "url": "../MyReservation/index.html", "userLevel": "預約成功" },{ "name": "2", "url": "../LookHouse/index.html", "userLevel": "已看完房" }] }, { "name": "2", "icon": "icon-wujiaoxing", "userLevel": "我的收藏", "list": [{ "name": "2", "url": "../CollectShops/index.html", "userLevel": "收藏店鋪", // "list": [{ // "name": "3", // "userLevel": "c三級" // }] },{ "name": "2", "url": "../CollectHouse/index.html", "userLevel": "收藏房源" }] },{ "name": "1", "icon": "icon-zuji-copy", "url":"../MyFootprint/index.html", "userLevel": "我的足跡" },{ "name": "1", "icon": "icon-zufangyuechifangzimianxing", "url": "../MyRent/index.html", "userLevel": "我的租房" }, { "name": "1", "icon": "icon-zhangdan", "url": "../MyBill/index.html", "userLevel": "我的賬單" }, { "name": "1", "icon": "icon-baoxiu", "userLevel": "房屋報修", "list": [{ "name": "2", "url": "#", "userLevel": "我的報修" },{ "name": "2", "url": "#", "userLevel": "增加服務" }] },{ "name": "1", "icon": "icon-comment", "url": "#", "userLevel": "我的評論" },{ "name": "1", "icon": "icon-qianbao", "userLevel": "獎勵錢包", "list": [{ "name": "2", "url": "#", "userLevel": "我的余額" },{ "name": "2", "url": "#", "userLevel": "交易流水" }] } ] };
很簡單:就一個data數組,然后分為幾個對象,每個對象里面也可能會有數組 (比如:list),則為二級菜單。 list里面也可能會有個數組,則為三級菜單。這便是一個層層遞歸下去的菜單欄
js代碼 (用JQ寫的,但是改成原生js也很方便);
<div class="navigation" id="navigation"></div>
var str = " "; /*遞歸實現獲取無級樹數據並生成DOM結構*/ var forTree = function (data) { for(var i=0; i<data.length; i++) { var urlstr = ""; try { if(typeof data[i]["url"] === undefined) { urlstr = "<div class='box'><i class='iconfont "+ o[i]['icon'] +"' ></i><span>"+o[i]["userLevel"]+"</span><ul>"; }else { urlstr = "<div class='box'><i class='iconfont "+ o[i]['icon'] +"' ></i><span><a target='myFrameName' href="+ o[i]["url"] +">"+ o[i]["userLevel"] +"</a></span><ul>"; } str+= urlstr; if(data[i]["list"] != null) { forTree(data[i]["list"]); } str += "</ul></div>" }catch(e) {} } return str; }; $("#navigation").html( forTree(json.data)); var menuTree = function(){ //給有子對象的元素加 $("#navigation ul").each(function(index, element) { var ulContent = $(element).html(); var spanContent = $(element).siblings("span").html(); if(ulContent){ $(element).siblings("span").html(spanContent + "<i id='one' class='iconfont icon-xiangshangjiantou-copy-copy-copy'></i>") } }); $("#left_navbar").find("div span").click(function(){ var ul = $(this).siblings("ul"); var spanStr = $(this).html(); var spanContent = spanStr.substr(0,4); console.log(spanContent); if(ul.find("div").html() != null){ if(ul.css("display") == "none"){ ul.show(300); $(this).html(spanContent + "<i id='one' class='jiantou iconfont icon-xiangshangjiantou'></i>"); }else{ ul.hide(300); $(this).html(spanContent + "<i id='one' class='jiantou iconfont icon-xiangshangjiantou-copy-copy-copy'></i>"); } } }) }();
這樣一個不錯的樹形菜單就完成了。
效果圖:
附上一個完整代碼(可以在里面更改代碼修改不同的需求)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> <title>JS無級樹樹形菜單</title> <style type="text/css"> .menuTree{ margin-left:0px;} .menuTree div{ padding-left:1px;} .menuTree div ul{ overflow:hidden; display:none; height:auto; margin:0;} .menuTree span{ display:block; height:20px; line-height:25px; padding-left:5px; margin:1px 0; cursor:pointer; border-bottom:1px solid #CCC;} .menuTree span:hover{ background-color:#e6e6e6; color:#cf0404;} .menuTree a{ color:#333; text-decoration:none;} .menuTree a:hover{ color:#06F;} .menuTree span{height: 50px;} </style> </head> <body> <div id="menuTree" class="menuTree"></div> </body> </html> <script type="text/javascript"> var json = [ { "name": "1", "userLevel":"+ 一級", "list": [ { //顯示名稱 "name": "2", //跳轉名稱 "url" :"url_herf", //用戶等級 "userLevel":"+ 二級", //下級 "list": [ { "name": "3", "userLevel":"三級" } ] } ] }, { "name": "1", "userLevel":"+ a一級", "list": [ { //顯示名稱 "name": "2", //跳轉名稱 "url" :"url_herf", //用戶等級 "userLevel":"+ b二級", //下級 "list": [ { "name": "3", "userLevel":"c三級" } ] } ] } ] /*遞歸實現獲取無級樹數據並生成DOM結構*/ var str = ""; var forTree = function(o){ for(var i=0;i<o.length;i++){ var urlstr = ""; try{ if(typeof o[i]["url"] == "undefined"){ urlstr = "<div><span>"+o[i]["userLevel"]+ o[i]["name"] +"</span><ul>"; }else{ urlstr = "<div><span>"+o[i]["userLevel"]+"<a href="+ o[i]["url"] +">"+ o[i]["name"] +"</a></span><ul>"; } str += urlstr; if(o[i]["list"] != null){ forTree(o[i]["list"]); } str += "</ul></div>"; }catch(e){} } return str; } /*添加無級樹*/ document.getElementById("menuTree").innerHTML = forTree(json); /*樹形菜單*/ var menuTree = function(){ //給有子對象的元素加 $("#menuTree ul").each(function(index, element) { var ulContent = $(element).html(); var spanContent = $(element).siblings("span").html(); if(ulContent){ $(element).siblings("span").html(spanContent) } }); $("#menuTree").find("div span").click(function(){ var ul = $(this).siblings("ul"); var spanStr = $(this).html(); var spanContent = spanStr.substr(3,spanStr.length); if(ul.find("div").html() != null){ if(ul.css("display") == "none"){ ul.show(300); // $(this).html("[-]" + spanContent); }else{ ul.hide(300); // $(this).html("[+] " + spanContent); } } }) }() /*樹形列表展開*/ $("#btn_open").click(function(){ $("#menuTree ul").show(300); curzt("-"); }) /*收縮*/ $("#btn_close").click(function(){ $("#menuTree ul").hide(300); curzt("+"); }) function curzt(v){ $("#menuTree span").each(function(index, element) { var ul = $(this).siblings("ul"); var spanStr = $(this).html(); var spanContent = spanStr.substr(3,spanStr.length); if(ul.find("div").html() != null){ $(this).html("["+ v +"] " + spanContent); } }); } </script>