自己以前从别人的博客中学到了不少东西,所以也想写点东西,毕竟是菜鸟一只,如果有什么错误还请指正,废话少说直接上代码,
最后的效果是这样的,首先去官网下载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方法,可以分部分请求,大大提高效率,