js递归函数 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="showUl"></div>
<!--<script src="js/jquery-1.7.1.min.js"></script>-->
<script>
<!--json code-->
    var data = {
        "name": "1级菜单1",
        "link": "#",
        "isleaf": false,
        "level": 0,
        "children": [


            {
                "name": "2级菜单1",
                "link": "###",
                "isleaf": false,
                "level": 1,

                "children": [
                    {
                        "name": "3级菜单1",
                        "link": "#",
                        "isleaf": true,
                        "level": 2,
                        "children": null
                    },
                    {
                        "name": "3级菜单2",
                        "link": "#",
                        "isleaf": true,
                        "level": 2,
                        "children": null
                    }
                ]
            },


            {
                "name": "2级菜单2",
                "link": "###",
                "isleaf": false,
                "level": 1,
                "children": [
                    {
                        "name": "3级菜单3",
                        "link": "###",
                        "isleaf": true,
                        "level": 2,
                        "children": null
                    }
                ]
            }

        ]
    };
    window.onload=function(){
        showUl= document.getElementById("showUl");
         showlist = document.createElement("ul");
        fun(data.children, showlist);
        showUl.appendChild(showlist)
    };

//data_children为json数据
//div为要组合成html的容器
    function fun(data_children,div){
        for(var n in data_children){
            //如果有子节点，则遍历该子节点
            if(data_children.length>0){
                //创建一个子节点li
                var  li=document.createElement("li");
                var ul =document.createElement("ul");
                li.innerHTML=data_children[n].name;
                
                //将li的文本设置好，并马上添加一个空白的ul子节点，并且将这个li添加到父亲节点中
                li.appendChild(ul);
                div.appendChild(li);

                fun(data_children[n].children, ul);

            }else {
                //如果该节点没有子节点，则直接将该节点li以及文本创建好直接添加到父亲节点中
                var mLi =document.createElement("li");
                mLi.innerHTML=data_children[n].name;
                div.append(mLi);
                console.log(111)
            }
        }
    }

</script>
</body>
</html>
posted @ 2015-12-18 17:00  小贱贱！  阅读(226)  评论(0)    收藏  举报