最近在做一個項目，需要利用從後臺傳過來的數據渲染一個樹形菜單：主要是利用遞歸算法一級一級向下渲染的。然後我通過查找案例，資料完成了這個功能，但還是想把它寫出來。以方便以後用得着。
先看數據結構（自己模擬的一個菜單欄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>