蚂蚁部落

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 317|回复: 1

[实例代码] 解析json数据生成树形导航菜单

[复制链接]
发表于 2016-9-8 00:47:05 | 显示全部楼层 |阅读模式
本帖最后由 antzone 于 2016-9-8 00:46 编辑

解析json数据生成树形导航菜单:
分享一段代码实例,它实现了解析json数据生成树形导航菜单的功能。
代码实例如下:
[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="author" content="http://www.softwhy.com/" />
  <title>蚂蚁部落</title>
  <style type="text/css">
    .menuTree {
      margin-left: 5px;
      border-left: 1px dotted deepskyblue;
    }

      .menuTree div {
        padding-left: 15px;
        margin-bottom: 2px;
      }

      .menuTree strong {
        border: 1px solid #aad3f2;
        background: deepskyblue;
        color: ghostwhite;
        border-radius: 6px;
        color: 16px));
      }

      .menuTree div ul {
        overflow: hidden;
        display: none;
        height: auto;
        border-left: 1px dotted deepskyblue;
        padding-left: 0;
        margin: 6px 0 6px 8px;
      }

      .menuTree span {
        display: block;
        height: 25px;
        line-height: 25px;
        padding-left: 5px;
        margin: 1px 0;
        cursor: pointer; /*border-bottom:1px solid #CCC;*/
        position: relative;
      }

        .menuTree span:hover {
          background-color: #e6e6e6;
          color: deepskyblue;
        }

      .menuTree a {
        color: #666;
        text-decoration: none !important;
      }

        .menuTree a:hover {
          color: #06F;
        }

      .menuTree span:before {
        content: " ";
        display: block;
        width: 20px;
        height: 0px;
        position: absolute;
        top: 50%;
        left: -15px;
        border-bottom: 1px dotted deepskyblue;
      }

      .menuTree ul span:before {
        content: " ";
        display: block;
        width: 70px;
        height: 0px;
        position: absolute;
        top: 50%;
        left: -70px;
        border-bottom: 1px dotted deepskyblue;
      }
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
<div id="menuTree" class="menuTree"></div>
  <script type="text/javascript">
var json = [{
    "name": "菜单栏效果",
    "list": [{
      "name": "-菜单栏效果",
      "url": "#a1"
    }, {
      "name": "-菜单栏效果a",
      "list": [{
        "name": "--菜单栏效果",
        "url": "#a11"
      }, {
        "name": "--菜单栏效果a",
        "list": [{
          "name": "---菜单栏效果",
          "url": "#a111"
        }, {
          "name": "---菜单栏效果a",
          "list": [{
            "name": "----菜单栏效果",
            "url": "#a1111"
          }, {
            "name": "----菜单栏效果a",
            "url": "#a1112"
          }]
        }]
      }, {
        "name": "--菜单栏效果aa",
        "url": "#a13"
      }, {
        "name": "--菜单栏效果aaa",
        "url": "#a14"
      }]
    }, {
      "name": "-菜单栏效果",
      "url": "#a3"
    }]
  }, {
    "name": "-b",
    "list": [{
      "name": "--b",
      "url": "#b1"
    }, {
      "name": "--bb",
      "list": [{
        "name": "----b",
        "url": "#b111"
      }, {
        "name": "----bb",
        "url": "#b112"
      }]
    }, ]
  }, {
    "name": "-c",
    "list": [{
      "name": "--c",
      "url": "#c1"
    }, {
      "name": "--cc",
      "url": "#c2"
    }]
  }, {
    "name": "-d"
  }]
  /*递归实现获取无级树数据并生成DOM结构*/
var str = "";
var forTree = function(o) {
    for (var i = 0; i < o.length; i++) {
      var urlstr = "";
      try {
        if (typeof o[i]["url"] == "undefined") {
          urlstr = "<div><span>" + o[i]["name"] + "</span><ul>";
        } else {
          urlstr = "<div><span><a href=" + o[i]["url"] + ">" + o[i]["name"] + "</a></span><ul>";
        }
        str += urlstr;
        if (o[i]["list"] != null) {
          forTree(o[i]["list"]);
        }
        str += "</ul></div>";
      } catch (e) {}
    }
    return str;
  }
  /*添加无级树*/
document.getElementById("menuTree").innerHTML = forTree(json);
/*树形菜单*/
var menuTree = function() {
  //给有子对象的元素加[+-]
  $("#menuTree ul").each(function(index, element) {
    var ulContent = $(element).html();
    var spanContent = $(element).siblings("span").html();
    if (ulContent) {
      $(element).siblings("span").html("<strong>[+]</strong> " + spanContent)
    }
  });
  $("#menuTree").find("div span").click(function() {
    var ul = $(this).siblings("ul");
    var spanStr = $(this).html();
    var spanContent = spanStr.substr(20, spanStr.length);
    if (ul.find("div").html() != null) {
      if (ul.css("display") == "none") {
        ul.show(300);
        $(this).html("<strong>[-]</strong>" + spanContent);
      } else {
        ul.hide(300);
        $(this).html("<strong>[+]</strong> " + spanContent);
      }
    }
  })
}()
</script>
</body>
</html>

发表于 2016-9-14 15:46:58 | 显示全部楼层
这个例子好,正好需要我参考

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复返回顶部 返回列表