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