zTree的简单使用

自己以前从别人的博客中学到了不少东西，所以也想写点东西，毕竟是菜鸟一只，如果有什么错误还请指正，废话少说直接上代码，

最后的效果是这样的，首先去官网下载zTree的js和css文件，给个网站http://www.treejs.cn/v3/api.php我觉得ztree的解释是做的最好的，简单明了

//zTree初始化
var setting = {  
   
    data: {    
    simpleData: {   //简单的数据源，一般开发中都是从数据库里读取                    
    enable: true,  
    idKey: "code",  //id和pid这个大家都明白 
    pIdKey: "parentCode",  
    showLine : true,  
    rootPId: 0  //根节点  
      },
key:{
name:"codeText",

}
        },

// 客户类型选择框
    $('#cusType1').on('click', function() {
    var treeNodes;
    $.ajax({
        type: 'PUT',
           dataType: 'json',
    contentType:'application/json;charset=UTF-8',
    url : '/dic/read/list',
    data: {type: 'STD_ZB_CUS_TYPE'},
    success : function(result) {
    if (result.httpCode == 200) {
   
                 treeNodes =JSON.stringify(result.data);
                 treeNodes=JSON.parse(treeNodes);
      $.fn.zTree.init($("#cusTypeTree"), setting,treeNodes);

    /*$(document).ready(function(){//初始化ztree对象      
      $.fn.zTree.init($("#cusTypeTree"), setting,treeNodes);
      });*/  
    } else {
    error(result.msg);
    }
   
    }
       });
    });
        
callback:{//回调函数
onClick:cusTypeGet//单机完之后执行该方法

}
        }; 

//回调函数

function cusTypeGet(event,treeId,treeNode){//treeNode中包含的zTree中的所有属性，

$('#cusType').empty();
$('#cusType').append("<option value="+treeNode.code+">"+treeNode.codeText+"</option>")
$('[data-dismiss="modal"]').click();

这样基本上就完成了，不过还不是很完善，它必须要等待数据全部返回完之后才能进程初始化，数据量过大的话就很影响性能，

可以使用zTree中自带的ajax方法，可以分部分请求，大大提高效率，