zoukankan html css js c++ java

递归函数的应用

一次开发中后台给出了这样的数据结构

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>

View Code

查看全文

相关阅读:
LeetCode 189. Rotate Array
LeetCode 965. Univalued Binary Tree
LeetCode 111. Minimum Depth of Binary Tree
LeetCode 104. Maximum Depth of Binary Tree
Windows下MySQL的安装与配置
 LeetCode 58. Length of Last Word
LeetCode 41. First Missing Positive
LeetCode 283. Move Zeroes
《蚂蚁金服11.11：支付宝和蚂蚁花呗的技术架构及实践》读后感
 删除docker下的镜像

原文地址：https://www.cnblogs.com/wangwenhui/p/7642996.html