js 递归解析json 菜单数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="../Public/css/bootstrap.css"/>
<script src="../Public/js/jquery-2.1.4.min.js" ></script>
<script src="../Public/js/myTest.js" ></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
#container{
width:100%;
height:750px;
}
#top{
width:100%;
height:80px;
border-bottom:1px gray solid;
background:#31B0D5;
}
#bottom{
width:100%;
height:670px;
}
#b_left{
width:18%;
height:670px;
border-right:1px gray solid;
overflow: auto;
float:left;
border-bottom: 1px #31B0D5 solid;
}
#b_right{
width:81%;
height:670px;
overflow: auto;
float:left;
position:relative;
border-bottom: 1px #31B0D5 solid;
}
#copyright{
width:100%;
height:25px;
text-align:center;
position:absolute;
bottom:0;
color:lightgray;
background:#31B0D5;
}
nav li{
list-style:none;
padding-left:25px;
}
nav li a{
text-decoration:none;
}
nav li a:hover{
background:lightgray;
text-decoration:none;
}
</style>
<script>
var data=[
{"text":"用户管理","href":"User/list.html","class_":"glyphicon glyphicon-user","nodes":[
{"text":"用户添加","href":"User/add.html","class_":"glyphicon glyphicon-signal","nodes":[{"text":"特殊用户删除","href":"User/User.html?mothod=delete"},{"text":"普通用户删除","href":"User/User.html?mothod=delete"}]},
{"text":"用户删除","href":"User/User.html?mothod=delete","class_":"glyphicon glyphicon-lock"},
{"text":"用户修改","href":"User/User.html?mothod=update"},
{"text":"用户查询","href":"User/User.html?mothod=query","class_":"glyphicon glyphicon-plane"},
]},
{"text":"部门管理","href":"Dept/list.html","nodes":[
{"text":"部门添加","href":"Dept/Dept.html?mothod=add"},
{"text":"部门删除","href":"Dept/Dept.html?mothod=delete"},
{"text":"部门修改","href":"Dept/Dept.html?mothod=update"},
{"text":"部门查询","href":"Dept/Dept.html?mothod=query"},
]},
{"text":"角色管理","href":"Role/list.html","nodes":[
{"text":"角色添加","href":"Role/Role.html?mothod=add"},
{"text":"角色删除","href":"Role/Role.html?mothod=delete"},
{"text":"角色修改","href":"Role/Role.html?mothod=update"},
{"text":"角色查询","href":"Role/Role.html?mothod=query"},
]},
{"text":"资源管理","href":"Resource/list.html","nodes":[
{"text":"资源添加","href":"Resource.html?mothod=add"},
{"text":"资源删除","href":"Resource.html?mothod=delete"},
{"text":"资源修改","href":"Resource.html?mothod=update"},
{"text":"资源查询","href":"Resource.html?mothod=query"},
]},
{"text":"宠物管理","href":"Pet/list.html","nodes":[
{"text":"宠物添加","href":"Pet.html?mothod=add"},
{"text":"宠物删除","href":"Pet.html?mothod=delete"},
{"text":"宠物修改","href":"Pet.html?mothod=update"},
{"text":"宠物查询","href":"Pet.html?mothod=query"},
]},
];
var menu_is_show=true;
$(function(){
$("#slider").click(function(){
if(menu_is_show){
$("#b_left").hide("slow");
$("#b_right").css({"width":"100%"});
$("#copyright").css({"width":"100%"});
$(this).removeClass("glyphicon-chevron-left").addClass("glyphicon-chevron-right");
}else{
$("#b_left").show("slow");
$("#b_right").css({"width":"81%"});
$("#copyright").css({"width":"100%"});
$(this).removeClass("glyphicon-chevron-right").addClass("glyphicon-chevron-left");
}
menu_is_show=!menu_is_show;
})
$("#menu nav").html(data_recursion(data,""));
})
//[]---数组 ｛｝---对象
function data_recursion(dat,resultString){
resultString+="<ul class='list-group'>";
dat.forEach(function(e,i){
resultString+="<li>";
if(e.class_){
resultString+="<span class='"+e.class_+"'></span> ";
}
resultString+="<a href='"+e.href+"'>";
resultString+=e.text;
if(e.nodes&&e.nodes.length>0){
console.log(e.nodes);
resultString=data_recursion(e.nodes,resultString);
}
resultString+="</a></li>";
})
resultString+="</ul>";
return resultString;
}
</script>
</head>
<body>
<div id="container">
<div id="top">
<div>
<img src="../Public/imgs/logo.jpg" style="height:65px;width:65px;margin:8px 0 0 8px;">
<span style="color:white;font-size: medium;font-weight:bold;">PetShop 后台管理系统</span>
<span id="slider" style="cursor:pointer;color:white;font-size:larger;background:lightgray;border-radius:50%;display:inline-block" class="glyphicon glyphicon-chevron-left"></span>
</div>
</div>
<div id="bottom">
<div id="b_left">
<div class="sidebar-scroll nav" id="menu">
<nav>
</nav>
</div>
</div>
<div id="b_right">
<iframe id="content" frameborder="0" src="" width="100%" height="640px" style="overflow:auto;"></iframe>
<div id="copyright">© all right resaive</div>
</div>
</div>
</div>
</body>
</html>
