javascript樹形結構的二維數組轉樹形結構，無限分類菜單

複製代碼另存爲一個html文件便可測試使用。

包含了三個部分，一是二維數據轉樹形結構，二是樹形結構的數據轉ul li格式的頁面格式，三是處理菜單的顯示和隱藏。

jquery文件能夠自行下載包含。

<title>樹形結構的二維數組轉樹形結構，無限分類菜單</title>
歡迎光臨程序員學習筆記：<a href='http://www.cnblogs.com/codeaaa'>http://www.cnblogs.com/codeaaa</a>
<div id='menu'></div>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script>
var list =[
    {
        "id": 2,
        "title": "西安",
        "parent_id": 0
    },
    {
        "id": 3,
        "title": "成都",
        "parent_id": 0
    },
    {
        "id": 4,
        "title": "華陽",
        "parent_id": 3
    },
    {
        "id": 5,
        "title": "廣都上街",
        "parent_id": 4
    },
    {
        "id": 18,
        "title": "廣都上街156號",
        "parent_id": 5
    },
    {
        "id": 19,
        "title": "廣都上街156號",
        "parent_id": 18
    },
    {
        "id": 6,
        "title": "龍泉",
        "parent_id": 3
    },
    {
        "id": 8,
        "title": "青白江",
        "parent_id": 3
    },
    {
        "id": 9,
        "title": "正北上街",
        "parent_id": 4
    },
    {
        "id": 10,
        "title": "重慶",
        "parent_id": 0
    },
    {
        "id": 11,
        "title": "長壽",
        "parent_id": 10
    }
];


$(document).ready(function() {
    
    // 線性數據轉化爲樹。
    function toTree(data, parent_id) {
        var tree = [];
        var temp;
        for (var i = 0; i < data.length; i++) {
            if (data[i].parent_id == parent_id) {
                var obj = data[i];
                temp = toTree(data, data[i].id);
                if (temp.length > 0) {
                 obj.children = temp;
                }
                tree.push(obj);
            }
        }
        return tree;
    }

    // 樹形數據轉化爲ul li格式
    function createMenu(data) {
        var menu_body = '<ul>';
        for(var i = 0; i < data.length; i++){
            // 一級菜單，默認顯示。
            if(data[i].parent_id == 0)
            {
                menu_body += '<li id="' + data[i].id + '" class="menuList" ><a href="#">' + data[i].title + '</a>';     
            }else{
                menu_body += '<li id="' + data[i].id + '" class="menuList" style="display:none;"><a href="#">' + data[i].title + '</a>';
            }
            if(data[i].children && data[i].children.length > 0){
                menu_body += createMenu(data[i].children)
            }
            menu_body += '</li>';
        }
        menu_body += '</ul>';
        console.log(menu_body);
        return menu_body;
    }

    // 菜單初始化。
    var tree;
    tree = toTree(list, 0);
    console.log(tree);

    menu_body = createMenu(tree);
    $("#menu").append(menu_body);

    // 處理菜單的隱藏和顯示。
    $(".menuList").click(function(){
        
        $(this).find("li").click(function(event) {
            return false;
        })
         
       if($(this).hasClass("shows")) {
            $(this).removeClass("shows");
            $(this).find("li").find("ul").removeClass("shows");
            $(this).find("li").hide();
        } else {
            $(this).addClass("shows");
            $(this).find("li").show();
            $(this).find("li").find("ul").find("li").hide();
            $(this).show();
        }
    });

});

</script>