一次开发中后台给出了这样的数据结构
0:{ menuCode:"15e836e7b80e4948b82883582f8edb23"
menuName:"选项参数配置"
parentCode:"6d9ed858455c4d42bb4db7acbe352dac"
}
1:{ menuCode:"6d9ed858455c4d42bb4db7acbe352dac"
menuName:"参数配置"
parentCode:"c47314ec62ec465589cf9b71ef6018c5"
}
2:{
menuCode:"c47314ec62ec465589cf9b71ef6018c5"
menuName:"系统管理"
parentCode:"0"
}
3:{menuCode:"f1d5969bca8f47a4a5cf831d825d0ac6"
menuName:"用户管理"
parentCode:"0"
}
4:{menuCode:"f727218c406147a0b20e546a2959ce77"
menuName:"项目管理"
parentCode:"0"
}
5:{menuCode:"fdbb8c7ab15c4054ad9fba3cc050ebdf"
menuName:"单位管理"
parentCode:"0"
}
达到如下效果:
<div>单位管理</div>
<div>项目管理</div>
<div>用户管理</div>
<div>系统管理
<div>参数配置
<div>选项参数配置</div>
</div>
</div>
我的代码实现：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id='root'></div>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
(function(){
var result = [
{
"description": "",
"menuCode": "15e836e7b80e4948b82883582f8edb23",
"menuName": "选项参数配置",
"parentCode": "6d9ed858455c4d42bb4db7acbe352dac"
},
{
"description": "",
"menuCode": "6d9ed858455c4d42bb4db7acbe352dac",
"menuName": "参数配置",
"parentCode": "c47314ec62ec465589cf9b71ef6018c5"
},
{
"description": "",
"menuCode": "c47314ec62ec465589cf9b71ef6018c5",
"menuName": "系统管理",
"parentCode": "0"
},
{
"description": "",
"menuCode": "f1d5969bca8f47a4a5cf831d825d0ac6",
"menuName": "用户管理",
"parentCode": "0"
},
{
"description": "",
"menuCode": "f727218c406147a0b20e546a2959ce77",
"menuName": "项目管理",
"parentCode": "0"
},
{
"description": "",
"menuCode": "fdbb8c7ab15c4054ad9fba3cc050ebdf",
"menuName": "单位管理",
"parentCode": "0"
}
];
result.forEach(function(value, index){
if( value.parentCode == '0' ){
$("#root").append("<div class='root' data-code="+value.menuCode+">"+value.menuName+"</div>");
}
});
getDomNode($(".root"),'root');
//最终的DOM结构输入到了root div中
console.log( $('#root').html() ); //输出最终的DOM结构
function getDomNode(ele, parentClass){
ele.each(function(index, value){
var id = $(this).attr('data-code');
var isEnd = true;
result.forEach(function(values, indexs){
if( values.parentCode == id ){
isEnd = false;
var className = parentClass + '-' + indexs;
ele.eq(index).append("<div class="+className+" data-code="+values.menuCode+">"+values.menuName+"</div>");
}
if(isEnd == false){
getDomNode( $("."+className), className );
}
});
});
}
})();
</script>
</body>
</html>