HTML結構:
<section class="sidebar"></setion>

{
"liClass": "active treeview",
"link": "index2.html",
"label": "結構預覽",
"iClass": "'fa fa-dashboard'",
"children": []
},
{
"liClass": "treeview",
"link": "#",
"label": "案例",
"iClass": "'fa fa-files-o'",
"spanClass": "pull-right-container",
"spanChildIClass": "label label-primary pull-right",
"children": [
{
"ulClass": "treeview-menu",
"children": [
{
"liClass": "treeview",
"link": "#",
"label": “文字",
"iClass": "'fa fa-circle-o'",
"children": []
},
{
"liClass": "treeview",
"link": "#",
"label": "文字",
"iClass": "'fa fa-circle-o'",
"children": []
},
{
"liClass": "treeview",
"link": "#",
"label": "文字",
"iClass": "'fa fa-circle-o'",
"children": []
},
{
"liClass": "treeview",
"link": "#",
"label": "文字",
"iClass": "'fa fa-circle-o'",
"children": []
},
{
"liClass": "treeview",
"link": "#",
"label": "文字",
"iClass": "'fa fa-circle-o'",
"children": []
},
{
"liClass": "treeview",
"link": "#",
"label": "文字",
"iClass": "'fa fa-circle-o'",
"children": []
},
{
"liClass": "treeview",
"link": "#",
"label": "文字",
"iClass": "'fa fa-circle-o'",
"children": []
},
{
"liClass": "treeview",
"link": "#",
"label": "文字",
"iClass": "'fa fa-circle-o'",
"children": []
},
{
"liClass": "treeview",
"link": "#",
"label": "文字",
"iClass": "'fa fa-circle-o'",
"children": []
},
{
"liClass": "treeview",
"link": "#",
"label": "貨商價格影響、環比",
"iClass": "'fa fa-circle-o'",
"children": []
},
{
"liClass": "treeview",
"link": "#",
"label": "文字",
"iClass": "'fa fa-circle-o'",
"children": []
},
{
"liClass": "treeview",
"link": "#",
"label": "文字",
"iClass": "'fa fa-circle-o'",
"children": []
},
{
"liClass": "treeview",
"link": "#",
"label": "文字",
"iClass": "'fa fa-circle-o'",
"children": []
},
{
"liClass": "treeview",
"link": "#",
"label": "1.0.01",
"iClass": "'fa fa-circle-o'",
"children": []
},
{
"liClass": "treeview",
"link": "#",
"label": "1.2.11",
"iClass": "'fa fa-circle-o'",
"children": []
}
]
}
]
},
{
"liClass": "treeview",
"link": "#",
"label": "文字",
"iClass": "'fa fa-share'",
"spanClass": "pull-right-container",
"spanChildIClass": "fa fa-angle-left pull-right",
"children": [
{
"ulClass": "treeview-menu",
"children": [
{
"liClass": "treeview",
"link": "#",
"label": "文字",
"iClass": "'fa fa-circle-o'",
"spanClass": "pull-right-container",
"spanChildIClass": "fa fa-angle-left pull-right",
"children": [
{
"ulClass": "treeview-menu",
"children": [
{
"liClass": "treeview",
"link": "#",
"label": "文字",
"iClass": "'fa fa-circle-o'",
"spanClass": "pull-right-container",
"spanChildIClass": "fa fa-angle-left pull-right",
"children": [
{
"ulClass": "treeview-menu",
"children": [
{
"liClass": "treeview",
"link": "#",
"label": "文字",
"iClass": "'fa fa-circle-o'",
"children": []
},
{
"liClass": "treeview",
"link": "#",
"label": "文字",
"iClass": "'fa fa-circle-o'",
"children": []
},
{
"liClass": "treeview",
"link": "#",
"label": "文字",
"iClass": "'fa fa-circle-o'",
"children": []
},
{
"liClass": "treeview",
"link": "#",
"label": "文字",
"iClass": "'fa fa-circle-o'",
"children": []
},
{
"liClass": "treeview",
"link": "#",
"label": "文字",
"iClass": "'fa fa-circle-o'",
"children": []
},
{
"liClass": "treeview",
"link": "#",
"label": "文字",
"iClass": "'fa fa-circle-o'",
"children": []
},
{
"liClass": "treeview",
"link": "#",
"label": "文字",
"iClass": "'fa fa-circle-o'",
"children": []
},
{
"liClass": "treeview",
"link": "#",
"label": "文字",
"iClass": "'fa fa-circle-o'",
"children": []
}
]
}
]
}
]
}
]
},
{
"liClass": "treeview",
"link": "#",
"label": "文字",
"iClass": "'fa fa-circle-o'",
"spanClass": "pull-right-container",
"spanChildIClass": "fa fa-angle-left pull-right",
"children": [
{
"ulClass": "treeview-menu",
"children": [
{
"liClass": "treeview",
"link": "#",
"label": "文字",
"iClass": "'fa fa-circle-o'",
"spanClass": "pull-right-container",
"spanChildIClass": "fa fa-angle-left pull-right",
"children": [
{
"ulClass": "treeview-menu",
"children": [
{
"type": "li",
"liClass": "treeview",
"link": "#",
"label": "文字",
"iClass": "'fa fa-circle-o'",
"children": []
},
{
"liClass": "treeview",
"link": "#",
"label": "文字",
"iClass": "'fa fa-circle-o'",
"children": []
},
{
"liClass": "treeview",
"link": "#",
"label": "文字",
"iClass": "'fa fa-circle-o'",
"children": []
}
]
}
]
}
]
}
]
},
{
"liClass": "treeview",
"link": "#",
"label": "文字",
"iClass": "'fa fa-circle-o'",
"spanClass": "pull-right-container",
"spanChildIClass": "fa fa-angle-left pull-right",
"children": [
{
"ulClass": "treeview-menu",
"children": [
{
"liClass": "treeview",
"link": "#",
"label": "文字",
"iClass": "'fa fa-circle-o'",
"spanClass": "pull-right-container",
"spanChildIClass": "fa fa-angle-left pull-right",
"children": [
{
"ulClass": "treeview-menu",
"children": [
{
"liClass": "treeview",
"link": "#",
"label": "文字",
"iClass": "'fa fa-circle-o'",
"children": []
},
{
"liClass": "treeview",
"link": "#",
"label": "文字",
"iClass": "'fa fa-circle-o'",
"children": []
}
]
}
]
},
{
"liClass": "treeview",
"link": "#",
"label": "文字",
"iClass": "'fa fa-circle-o'",
"spanClass": "pull-right-container",
"spanChildIClass": "fa fa-angle-left pull-right",
"children": [
{
"ulClass": "treeview-menu",
"children": [
{
"liClass": "treeview",
"link": "#",
"label": "文字",
"iClass": "'fa fa-circle-o'",
"children": []
},
{
"liClass": "treeview",
"link": "#",
"label": "文字",
"iClass": "'fa fa-circle-o'",
"children": []
},
{
"liClass": "treeview",
"link": "#",
"label": "文字",
"iClass": "'fa fa-circle-o'",
"children": []
},
{
"liClass": "treeview",
"link": "#",
"label": "文字",
"iClass": "'fa fa-circle-o'",
"children": []
},
{
"liClass": "treeview",
"link": "#",
"label": "文字",
"iClass": "'fa fa-circle-o'",
"children": []
},
{
"liClass": "treeview",
"link": "#",
"label": "文字",
"iClass": "'fa fa-circle-o'",
"children": []
}
]
}
]
}
]
}
]
}
]
}
]
},

/** * Created on 2017/6/27. */ $(function () { $.getJSON({ type: "get", url: "dist/json/nav.json", success: function (data) { var showList = $("<ul class='" + data.ulClass + "'><li class='header'>主導航</li></ul>"); showAll(data, showList); $(".sidebar").append(showList); } }); //data為json數據 //parent為要組合成html的容器 function showAll(data, parent) { $.each(data.children, function (index, fatherLi) {//遍歷數據集 var li1 = $("<li class='" + fatherLi.liClass + "'><a href='" + fatherLi.link + "'><i class=" + fatherLi.iClass + "></i>" + fatherLi.label + "</a></li>");//沒有children的初始li結構 var li2 = $("<li class='" + fatherLi.liClass + "'><a href='" + fatherLi.link + "'><i class=" + fatherLi.iClass + "></i>" + fatherLi.label + "<span class='" + fatherLi.spanClass + "'><i class='" + fatherLi.spanChildIClass + "'></i></span>" + "</a></li>");//有children的初始li結構 //console.log($(li1).html()); //console.log($(li2).html()); if (fatherLi.children.length > 0) { //如果有子節點,則遍歷該子節點 var ul = $("<ul class='" + fatherLi.children[0].ulClass + "'></ul>"); $(li2).append(ul).appendTo(parent);//將li的初始化選擇好,並馬上添加帶類名的ul子節點,並且將這個li添加到父親節點中 showAll(fatherLi.children[0], $(li2).children().eq(1));//將空白的ul作為下一個遞歸遍歷的父親節點傳入,遞歸調用showAll函數 } else { $(li1).appendTo(parent);//如果該節點沒有子節點,則直接將該節點li以及文本創建好直接添加到父親節點中 } }); } });
總結:
1、json數據雖是DOM結構的映射,但存DOM信息也不是照搬全存,比如每個ul或者li就沒有必要再在json中存一個”type“:”ul“,需要觀察DOM結構的共同點及規律,進而轉換成json。
2、ajax回調函數傳遞參數問題:寫回掉函數的時候發現沒有地方傳參數,這個時候涉及閉包問題,可以利用匿名函數調用你想調用的函數,並傳遞參數:

$.getJSON({ type: "post", url: "dist/json/nav.json", success: function (data) { var showList = $("<ul class='" + data.ulClass + "'><li class='header'>主導航</li></ul>"); showAll(data, showList); $(".sidebar").append(showList); } });
3、這種多級菜單,與table中復雜表頭動態生成道理很相似,下一步就是嘗試用json動態生成復雜表頭