用jquery根据json动态创建多级菜单导航
2021-07-10 19:05
标签：splay fat files play tree gif img post console 总结： 1、json数据虽是DOM结构的映射，但存DOM信息也不是照搬全存，比如每个ul或者li就没有必要再在json中存一个”type“：”ul“，需要观察DOM结构的共同点及规律，进而转换成json。 2、ajax回调函数传递参数问题：写回掉函数的时候发现没有地方传参数，这个时候涉及闭包问题，可以利用匿名函数调用你想调用的函数，并传递参数： 3、这种多级菜单，与table中复杂表头动态生成道理很相似，下一步就是尝试用json动态生成复杂表头 用jquery根据json动态创建多级菜单导航 标签：splay fat files play tree gif img post console 原文地址：http://www.cnblogs.com/fatty-yu/p/7088955.htmlHTML结构：
{
"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 = $("
");
showAll(data, showList);
$(".sidebar").append(showList);
}
});
//data为json数据
//parent为要组合成html的容器
function showAll(data, parent) {
$.each(data.children, function (index, fatherLi) {//遍历数据集
var li1 = $("");
$(li2).append(ul).appendTo(parent);//将li的初始化选择好，并马上添加带类名的ul子节点，并且将这个li添加到父亲节点中
showAll(fatherLi.children[0], $(li2).children().eq(1));//将空白的ul作为下一个递归遍历的父亲节点传入，递归调用showAll函数
} else {
$(li1).appendTo(parent);//如果该节点没有子节点，则直接将该节点li以及文本创建好直接添加到父亲节点中
}
});
}
});
$.getJSON({
type: "post",
url: "dist/json/nav.json",
success: function (data) {
var showList = $("
");
showAll(data, showList);
$(".sidebar").append(showList);
}
});
上一篇：.NET4缓存过期策略摘录
下一篇：css3圆环闪烁动画