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


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動態生成復雜表頭

 

  


免責聲明!

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



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM