构建简单的json树形菜单

json结构:

var Menu = [{

            tit:"一级菜单",

            submenu:[{

                tit:"二级菜单",

                url:"",

                func:function(){

                    alert('what do you want to do?');

                }

            },{

                tit:"二级菜单",

                func:function(){

                    alert('do what?');

                },

                submenu:[{

                    tit:"三级菜单",

                    url:"",

                    submenu:[{

                        tit:"四级菜单",

                        url:""

                    },{

                        tit:"四级菜单",

                        url:""

                    }]

                },{

                    tit:"三级菜单",

                    url:""

                }]

            }]

        },{

            tit:"一级菜单",

            submenu:[{

                tit:"二级菜单",

                url:""

            },{

                tit:"二级菜单",

                submenu:[{

                    tit:"三级菜单",

                    url:""

                },{

                    tit:"三级菜单",

                    url:""

                }]

            }]

        }];
View Code

构建菜单处理函数

/*

     * @构建树形菜单

     * @arrJson:json数据

     * @container:菜单容器

     */

    function menuTree(jsonArr,container,treeId){

        var oText,oUrl;

        var oUl = document.createElement('ul');

        for(var i = 0 ;i < jsonArr.length; i++){

            var oLi = document.createElement('li');

            oUrl = jsonArr[i].url || "javascript:void(0)";

            oText = jsonArr[i].tit;

            if(jsonArr[i].submenu){

                 oLi.innerHTML ='<a href="'+oUrl+'">'+oText+'</a>'; 

                 menuTree(jsonArr[i].submenu,oLi);//递归构建子菜单

            }else{

                oLi.innerHTML = '<a href="'+oUrl+'">'+oText+'</a>';

            }

            //自定义函数

            if(typeof jsonArr[i].func =="function"){ 

                oLi.getElementsByTagName('a')[0].func = jsonArr[i].func;

                oLi.getElementsByTagName('a')[0].onclick=function(){

                    this.func();

                }

            }

            oUl.appendChild(oLi);

        }

        //最外层容器事件委托

        if(treeId){

            document.getElementById(treeId).onclick = function(e){

                var event = e || window.event;

                var target = event.target||event.srcElement;

                var next = target.nextSibling;

                if(target.nodeName.toLowerCase() == "a"){

                    if(next){

                        if(next.style.display=="" || next.style.display=="block"){

                            next.style.display="none";

                        }else{

                            next.style.display="block";

                        }

                    }

                }

            }

        }

        container.appendChild(oUl);

    }
View Code

完整demo:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>json树形菜单</title>

</head>

<body>

    <h2>构建json树形菜单</h2>

    <div class="tree" id="tree"></div>

    <script type="text/javascript">

    window.onload = function(){

        var Menu = [{

            tit:"一级菜单",

            submenu:[{

                tit:"二级菜单",

                url:"",

                func:function(){

                    alert('what do you want to do?');

                }

            },{

                tit:"二级菜单",

                func:function(){

                    alert('do what?');

                },

                submenu:[{

                    tit:"三级菜单",

                    url:"",

                    submenu:[{

                        tit:"四级菜单",

                        url:""

                    },{

                        tit:"四级菜单",

                        url:""

                    }]

                },{

                    tit:"三级菜单",

                    url:""

                }]

            }]

        },{

            tit:"一级菜单",

            submenu:[{

                tit:"二级菜单",

                url:""

            },{

                tit:"二级菜单",

                submenu:[{

                    tit:"三级菜单",

                    url:""

                },{

                    tit:"三级菜单",

                    url:""

                }]

            }]

        }];

    //构建菜单

     menuTree(Menu,document.getElementById('tree'),'tree');

    }



    /*

     * @构建树形菜单

     * @arrJson:json数据

     * @container:菜单容器

     */

    function menuTree(jsonArr,container,treeId){

        var oText,oUrl;

        var oUl = document.createElement('ul');

        for(var i = 0 ;i < jsonArr.length; i++){

            var oLi = document.createElement('li');

            oUrl = jsonArr[i].url || "javascript:void(0)";

            oText = jsonArr[i].tit;

            if(jsonArr[i].submenu){

                 oLi.innerHTML ='<a href="'+oUrl+'">'+oText+'</a>'; 

                 menuTree(jsonArr[i].submenu,oLi);//递归构建子菜单

            }else{

                oLi.innerHTML = '<a href="'+oUrl+'">'+oText+'</a>';

            }

            //自定义函数

            if(typeof jsonArr[i].func =="function"){ 

                oLi.getElementsByTagName('a')[0].func = jsonArr[i].func;

                oLi.getElementsByTagName('a')[0].onclick=function(){

                    this.func();

                }

            }

            oUl.appendChild(oLi);

        }

        //最外层容器事件委托

        if(treeId){

            document.getElementById(treeId).onclick = function(e){

                var event = e || window.event;

                var target = event.target||event.srcElement;

                var next = target.nextSibling;

                if(target.nodeName.toLowerCase() == "a"){

                    if(next){

                        if(next.style.display=="" || next.style.display=="block"){

                            next.style.display="none";

                        }else{

                            next.style.display="block";

                        }

                    }

                }

            }

        }

        container.appendChild(oUl);

    }

    </script>

</body>

</html>
View Code

效果图:

构建简单的json树形菜单

 

完整实例:

menuTreeDemo.zip

 

你可能感兴趣的:(json)