首页 > 代码库 > 用jquery根据json动态创建多级菜单导航

用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=http://www.mamicode.com/‘" + fatherLi.link + "‘><i class=" + fatherLi.iClass + "></i>" + fatherLi.label + "</a></li>");//没有children的初始li结构
            var li2 = $("<li class=‘" + fatherLi.liClass + "‘><a href=http://www.mamicode.com/‘" + 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动态创建多级菜单导航