構建簡單的json樹形菜單

本文轉載自查看原文 2014-10-31 12:06 2812 JavaScript

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

效果圖：

完整實例：

menuTreeDemo.zip

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 簡單的遞歸加載樹形菜單使用zTree插件構建樹形菜單 Django權限之樹形菜單權限構建樹形菜單的json字符串的拼接 4行代碼簡單實現js樹形菜單簡單實用的二級樹形菜單hovertree java構建樹形菜單遞歸工具類樹形菜單 Python 遞歸返回樹形菜單JSON串 jquery,tree無限級樹形菜單+簡單實用案例