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();
})