jquery解析json异步功能树

1.html代码：

<div class="tree_menu">
 <ul id="treeRoot"></ul>
</div>

2.定义的json格式：json对象一般用双引号，并且文件编码方式为utf-8

[{

"id":"01",

"name":"中国",

"items":[{

"id":"0101",

"name":"北京市",

"items":[{

"id":"0101",

"name":"东城区"

}]

}]

},

{

"id":"02",

"name":"美国"

}]

3.javascript解析json数组

var baseUrl = window.location.host;
function createTreeNode(){
 $.getJSON("http://"+baseUrl+"/json/js/treeData.json",function(data){
  $("#treeRoot").empty();
  var htmlstr = '';
  $.each(data,function(itemsIndex,item){
   htmlstr += "<li id='"+item.id+"'><span class='hitarea'>"+item.name+"</span>";
   if(item.items && item.items.length > 0){
    htmlstr +="<ul id='ul"+item.id+"' title='"+itemsIndex+"'></ul>";
   }
   htmlstr +="</li>";
  });
  $("#treeRoot").append(htmlstr); 
  function loadData(treeRoot,json){
   var hitarea = treeRoot.find("li>span.hitarea");
   var titAttr = treeRoot.find("ul").attr("title");
   hitarea.each(function(i){
    hitarea.eq(i).one("click",function(){  //第一次点击时加载子项
     var itemUl = json[titAttr].items;
     var newUl = $(this).next("ul");
     var html = '';
     $.each(itemUl,function(indexItems,item){
      html += "<li id='"+item.id+"'><span class='hitarea'>"+item.name+"</span>";
      if(item.items && item.items.length > 0){
       html +="<ul id='ul"+item.id+"' title='"+indexItems+"'></ul>";
      }
      html +="</li>";
     });
     newUl.append(html);
     loadData(newUl,itemUl);  //递归调用loadData方法
    })
   })
  }
  loadData($("#treeRoot"),data);
 })
};
$(document).ready(function(){
 createTreeNode();
})