解析json資料生成樹形導航選單

admin發表於2017-02-02
原文網址 : https://www.softwhy.com/article-383-1.html
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>

相關文章