用jquery根據json動態建立多級菜單導航

標籤：splay   fat   files   play   tree   gif   img   post   console   

HTML結構：

<section class="sidebar"></setion>

{      "liClass": "active treeview",      "link": "index2.html",      "label": "結構預覽",      "iClass": "‘fa fa-dashboard‘",      "children": []    },    {      "liClass": "treeview",      "link": "#",      "label": "案例",      "iClass": "‘fa fa-files-o‘",      "spanClass": "pull-right-container",      "spanChildIClass": "label label-primary pull-right",      "children": [        {          "ulClass": "treeview-menu",          "children": [            {              "liClass": "treeview",              "link": "#",              "label": “文字",              "iClass": "‘fa fa-circle-o‘",              "children": []            },            {              "liClass": "treeview",              "link": "#",              "label": "文字",              "iClass": "‘fa fa-circle-o‘",              "children": []            },            {              "liClass": "treeview",              "link": "#",              "label": "文字",              "iClass": "‘fa fa-circle-o‘",              "children": []            },            {              "liClass": "treeview",              "link": "#",              "label": "文字",              "iClass": "‘fa fa-circle-o‘",              "children": []            },            {              "liClass": "treeview",              "link": "#",              "label": "文字",              "iClass": "‘fa fa-circle-o‘",              "children": []            },            {              "liClass": "treeview",              "link": "#",              "label": "文字",              "iClass": "‘fa fa-circle-o‘",              "children": []            },            {              "liClass": "treeview",              "link": "#",              "label": "文字",              "iClass": "‘fa fa-circle-o‘",              "children": []            },            {              "liClass": "treeview",              "link": "#",              "label": "文字",              "iClass": "‘fa fa-circle-o‘",              "children": []            },            {              "liClass": "treeview",              "link": "#",              "label": "文字",              "iClass": "‘fa fa-circle-o‘",              "children": []            },            {              "liClass": "treeview",              "link": "#",              "label": "貨商價格影響、環比",              "iClass": "‘fa fa-circle-o‘",              "children": []            },            {              "liClass": "treeview",              "link": "#",              "label": "文字",              "iClass": "‘fa fa-circle-o‘",              "children": []            },            {              "liClass": "treeview",              "link": "#",              "label": "文字",              "iClass": "‘fa fa-circle-o‘",              "children": []            },            {              "liClass": "treeview",              "link": "#",              "label": "文字",              "iClass": "‘fa fa-circle-o‘",              "children": []            },            {              "liClass": "treeview",              "link": "#",              "label": "1.0.01",              "iClass": "‘fa fa-circle-o‘",              "children": []            },            {              "liClass": "treeview",              "link": "#",              "label": "1.2.11",              "iClass": "‘fa fa-circle-o‘",              "children": []            }          ]        }      ]    },    {      "liClass": "treeview",      "link": "#",      "label": "文字",      "iClass": "‘fa fa-share‘",      "spanClass": "pull-right-container",      "spanChildIClass": "fa fa-angle-left pull-right",      "children": [        {          "ulClass": "treeview-menu",          "children": [            {              "liClass": "treeview",              "link": "#",              "label": "文字",              "iClass": "‘fa fa-circle-o‘",              "spanClass": "pull-right-container",              "spanChildIClass": "fa fa-angle-left pull-right",              "children": [                {                  "ulClass": "treeview-menu",                  "children": [                    {                      "liClass": "treeview",                      "link": "#",                      "label": "文字",                      "iClass": "‘fa fa-circle-o‘",                      "spanClass": "pull-right-container",                      "spanChildIClass": "fa fa-angle-left pull-right",                      "children": [                        {                          "ulClass": "treeview-menu",                          "children": [                            {                              "liClass": "treeview",                              "link": "#",                              "label": "文字",                              "iClass": "‘fa fa-circle-o‘",                              "children": []                            },                            {                              "liClass": "treeview",                              "link": "#",                              "label": "文字",                              "iClass": "‘fa fa-circle-o‘",                              "children": []                            },                            {                              "liClass": "treeview",                              "link": "#",                              "label": "文字",                              "iClass": "‘fa fa-circle-o‘",                              "children": []                            },                            {                              "liClass": "treeview",                              "link": "#",                              "label": "文字",                              "iClass": "‘fa fa-circle-o‘",                              "children": []                            },                            {                              "liClass": "treeview",                              "link": "#",                              "label": "文字",                              "iClass": "‘fa fa-circle-o‘",                              "children": []                            },                            {                              "liClass": "treeview",                              "link": "#",                              "label": "文字",                              "iClass": "‘fa fa-circle-o‘",                              "children": []                            },                            {                              "liClass": "treeview",                              "link": "#",                              "label": "文字",                              "iClass": "‘fa fa-circle-o‘",                              "children": []                            },                            {                              "liClass": "treeview",                              "link": "#",                              "label": "文字",                              "iClass": "‘fa fa-circle-o‘",                              "children": []                            }                          ]                        }                      ]                    }                  ]                }              ]            },            {              "liClass": "treeview",              "link": "#",              "label": "文字",              "iClass": "‘fa fa-circle-o‘",              "spanClass": "pull-right-container",              "spanChildIClass": "fa fa-angle-left pull-right",              "children": [                {                  "ulClass": "treeview-menu",                  "children": [                    {                      "liClass": "treeview",                      "link": "#",                      "label": "文字",                      "iClass": "‘fa fa-circle-o‘",                      "spanClass": "pull-right-container",                      "spanChildIClass": "fa fa-angle-left pull-right",                      "children": [                        {                          "ulClass": "treeview-menu",                          "children": [                            {                              "type": "li",                              "liClass": "treeview",                              "link": "#",                              "label": "文字",                              "iClass": "‘fa fa-circle-o‘",                              "children": []                            },                            {                              "liClass": "treeview",                              "link": "#",                              "label": "文字",                              "iClass": "‘fa fa-circle-o‘",                              "children": []                            },                            {                              "liClass": "treeview",                              "link": "#",                              "label": "文字",                              "iClass": "‘fa fa-circle-o‘",                              "children": []                            }                          ]                        }                      ]                    }                  ]                }              ]            },            {              "liClass": "treeview",              "link": "#",              "label": "文字",              "iClass": "‘fa fa-circle-o‘",              "spanClass": "pull-right-container",              "spanChildIClass": "fa fa-angle-left pull-right",              "children": [                {                  "ulClass": "treeview-menu",                  "children": [                    {                      "liClass": "treeview",                      "link": "#",                      "label": "文字",                      "iClass": "‘fa fa-circle-o‘",                      "spanClass": "pull-right-container",                      "spanChildIClass": "fa fa-angle-left pull-right",                      "children": [                        {                          "ulClass": "treeview-menu",                          "children": [                            {                              "liClass": "treeview",                              "link": "#",                              "label": "文字",                              "iClass": "‘fa fa-circle-o‘",                              "children": []                            },                            {                              "liClass": "treeview",                              "link": "#",                              "label": "文字",                              "iClass": "‘fa fa-circle-o‘",                              "children": []                            }                          ]                        }                      ]                    },                    {                      "liClass": "treeview",                      "link": "#",                      "label": "文字",                      "iClass": "‘fa fa-circle-o‘",                      "spanClass": "pull-right-container",                      "spanChildIClass": "fa fa-angle-left pull-right",                      "children": [                        {                          "ulClass": "treeview-menu",                          "children": [                            {                              "liClass": "treeview",                              "link": "#",                              "label": "文字",                              "iClass": "‘fa fa-circle-o‘",                              "children": []                            },                            {                              "liClass": "treeview",                              "link": "#",                              "label": "文字",                              "iClass": "‘fa fa-circle-o‘",                              "children": []                            },                            {                              "liClass": "treeview",                              "link": "#",                              "label": "文字",                              "iClass": "‘fa fa-circle-o‘",                              "children": []                            },                            {                              "liClass": "treeview",                              "link": "#",                              "label": "文字",                              "iClass": "‘fa fa-circle-o‘",                              "children": []                            },                            {                              "liClass": "treeview",                              "link": "#",                              "label": "文字",                              "iClass": "‘fa fa-circle-o‘",                              "children": []                            },                            {                              "liClass": "treeview",                              "link": "#",                              "label": "文字",                              "iClass": "‘fa fa-circle-o‘",                              "children": []                            }                          ]                        }                      ]                    }                  ]                }              ]            }          ]        }      ]    },

json資料

/** * Created on 2017/6/27. */$(function () {    $.getJSON({        type: "get",        url: "dist/json/nav.json",        success: function (data) {            var showList = $("<ul class=‘" + data.ulClass + "‘><li class=‘header‘>主導航</li></ul>");            showAll(data, showList);            $(".sidebar").append(showList);        }    });    //data為json資料    //parent為要組合成html的容器    function showAll(data, parent) {        $.each(data.children, function (index, fatherLi) {//遍曆資料集            var li1 = $("<li class=‘" + fatherLi.liClass + "‘><a href=‘" + fatherLi.link + "‘><i class=" + fatherLi.iClass + "></i>" + fatherLi.label + "</a></li>");//沒有children的初始li結構            var li2 = $("<li class=‘" + fatherLi.liClass + "‘><a href=‘" + fatherLi.link + "‘><i class=" + fatherLi.iClass + "></i>" + fatherLi.label + "<span class=‘" + fatherLi.spanClass + "‘><i class=‘" + fatherLi.spanChildIClass + "‘></i></span>" + "</a></li>");//有children的初始li結構            //console.log($(li1).html());            //console.log($(li2).html());            if (fatherLi.children.length > 0) { //如果有子節點，則遍曆該子節點                var ul = $("<ul class=‘" + fatherLi.children[0].ulClass + "‘></ul>");                $(li2).append(ul).appendTo(parent);//將li的初始化選擇好，並馬上添加帶類名的ul子節點，並且將這個li添加到父親節點中                showAll(fatherLi.children[0], $(li2).children().eq(1));//將空白的ul作為下一個遞迴遍曆的父親節點傳入，遞迴調用showAll函數            } else {                $(li1).appendTo(parent);//如果該節點沒有子節點，則直接將該節點li以及文本建立好直接添加到父親節點中            }        });    }});

js代碼

總結：

　　1、json資料雖是DOM結構的映射，但存DOM資訊也不是照搬全存，比如每個ul或者li就沒有必要再在json中存一個”type“：”ul“，需要觀察DOM結構的共同點及規律，進而轉換成json。

　　2、ajax回呼函數傳遞參數問題：寫回掉函數的時候發現沒有地方傳參數，這個時候涉及閉包問題，可以利用匿名函數調用你想調用的函數，並傳遞參數：

$.getJSON({        type: "post",        url: "dist/json/nav.json",        success: function (data) {            var showList = $("<ul class=‘" + data.ulClass + "‘><li class=‘header‘>主導航</li></ul>");            showAll(data, showList);            $(".sidebar").append(showList);        }    });

like this

　　3、這種多級菜單，與table中複雜表頭動態產生道理很相似，下一步就是嘗試用json動態產生複雜表頭

 

　　

用jquery根據json動態建立多級菜單導航