用jquery根据json动态创建多级菜单导航
Posted Geminiyu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用jquery根据json动态创建多级菜单导航相关的知识，希望对你有一定的参考价值。
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动态生成复杂表头