zTree 树形控件 ajax动态加载数据

 

很久没搞过树形控件了 ， 再次接触看官网文档有点没懂，于是在网上找了个代码copy上，但数据是写死的，就想这在用ajax异步取出数据替换，下面是js代码

<SCRIPT type="text/javascript" >
//定义全局ztree数据
    var zNodes;
     
     /* 初始化ztree数据 */
     function initZtree(){
        $.ajax({
            type: "GET",
            url: "<%=request.getContextPath() %>/articleType/getArticleType",
            dataType: "json",
            async:false,
            success: function(data){
                var str="";
                for(var i =0;i<data.type.length;i++){
                    str += "{id:'"+ data.type[i].id+"', pId:'"+data.type[i].pid+"', name:'"+data.type[i].name+"'},\n";
                   }
                   alert("["+str+"]");
                   zNodes='['+str+']';
                   $("#ztree").val(zNodes);
            }
        });
    }
     
     $(function(){
         //initZtree();
         
         alert($("#ztree").val()+"999");
         alert(zNodes);
         
           zNodess = zNodes;
          alert("8888"+zNodess);
     })
     
     
 
 
    var zTreeObj,
    setting = {
        view: {
            selectedMulti: false
        },
        async: {
            enable: true,
            url: "<%=request.getContextPath() %>/articleType/getArticleType",
            otherParam: { "id":"1", "name":"test"}
        },
        data: {  
            simpleData: {  
                enable:true,  
                idKey: "id",  
                pIdKey: "pId",  
                rootPId: ""  
            }  
        },  
        callback: {  
            onClick: function(treeId, treeNode) {  
                var treeObj = $.fn.zTree.getZTreeObj(treeNode);  
                var selectedNode = treeObj.getSelectedNodes()[0];  
                $("#txtId").val(selectedNode.id);  
                $("#txtAddress").val(selectedNode.name);  
            }  
        }  
    }
    
    $(document).ready(function(){
        zTreeObj = $.fn.zTree.init($("#tree"), setting,zNodess );
    });
  </SCRIPT>

View Code