使用JavaScript 實現簡單的樹形菜單

已有數據如下，想要生成一個樹形菜單。

        var path = [
            {
                path: "a/a",
                component: "pages/abc",
                meta: {
                    title: "安徽安徽",
                    role: ["admin", "headman"]
                }
            },
            {
                path: "a/b",
                component: "pages/d",
                meta: {
                    title: "伯明翰伯明翰",
                    role: ["headman", "all"]
                },
                children: [{
                    path: "a/b/edit",
                    component: "pages/edit",
                    meta: {
                        title: "伯明翰 --子元素1",
                        role: ["all"]
                    }
                }, {
                    path: "a/b/edit",
                    component: "pages/edit",
                    meta: {
                        title: "伯明翰--子元素2",
                        role: ["headman", "admin", "all"]
                    }
                }]
            },
            {
                path: "a/c",
                component: "pages/ac",
                meta: {
                    title: "潮州潮州",
                    role: ["all"]
                },
                children: [{
                    path: "a/c",
                    component: "pages/ac",
                    meta: {
                        title: "潮州--子元素1",
                        role: ["all"]
                    },
                }, {
                    path: "a/cc",
                    component: "pages/acc",
                    meta: {
                        title: "潮州--子元素2",
                        role: ["headman"]
                    },
                }]
            },
            {
                path: "a/d",
                component: "pages/ad",
                meta: {
                    title: "洞庭湖洞庭湖",
                    role: ["all"]
                }
            },
            {
                path: "a/e",
                component: "pages/ae",
                meta: {
                    title: "嗯吶嗯吶",
                    role: ["headman", "all"]
                }
            }
        ];

解決方式：遞歸 。結束遞歸的條件，沒有children節點。

整體代碼如下：

        var ul = document.getElementById("path-ul");
        var ulHTML = "";

        function wholePathHtml(path) {
            for (var i = 0; i < path.length; i++) {
                if (!path[i].children) {                  
                    ulHTML += "<li>" + path[i].meta.title + "</li>";

                } else {
                    var childrenHTML = "<div><ul>" + createHtml(path[i].children) + "</ul></div>";
                    ulHTML += "<li>" + path[i].meta.title + childrenHTML + "</li>";
                }
            }
            ul.innerHTML = ulHTML;
        }

        function createHtml(path) {
            var htmls = "";
            for (var i = 0; i < path.length; i++) {
                htmls += "<li>" + path[i].meta.title + "</li>";
            }
            return htmls;
        }

完整的層級列表結果圖

如果想要根據某些條件決定是否在這個層級列表中顯示，只要在生成時加上相應的判定條件即可。
這裏的條件是，role字段中是否包含"all"，包含則顯示，不包含則不顯示。

    function filterPath(path) {
            for (var i = 0; i < path.length; i++) {
                if (!path[i].children) {
                    if(path[i].meta.role.includes("all")){
                        ulHTML += "<li>" + path[i].meta.title +"-----"+path[i].meta.role+ "</li>";
                    }else{
                        ulHTML += "";
                    }                  
                } else {
                    var childrenHTML = "<div><ul>" + createFilterHtml(path[i].children) + "</ul></div>";
                    ulHTML += "<li>" + path[i].meta.title + childrenHTML + "</li>"
                }
            }
            ul.innerHTML = ulHTML
        }


        function createFilterHtml(path) {
            var htmls = "";
            for (var i = 0; i < path.length; i++) {
                if(path[i].meta.role.includes("all")){
                        htmls += "<li>" + path[i].meta.title+"-----"+path[i].meta.role + "</li>";
                    }else{
                        htmls += "";
                    }  
            }
            return htmls
        }

下面是加上判定條件後的結果圖