递归函数的应用

Posted sandy.simple

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了递归函数的应用相关的知识，希望对你有一定的参考价值。

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

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

 








以上是关于递归函数的应用的主要内容，如果未能解决你的问题，请参考以下文章

vue递归组件的一些理解

哈斯克尔。我很困惑这个代码片段是如何工作的

如何在自定义PyYAML构造函数中处理递归？

JavaSE 方法的使用

函数的应用 递归函数

JavaScript - 代码片段，Snippets，Gist