最近在项目中用到了ztree.js这个构型树插件，因为我们公司使用的是Java开发后台，在插件的异步加载上和官方文档有些差异，所以自己总结了一下使用经验。
一、ztree.js简介
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。zTree 是开源免费的软件（MIT 许可证）。
- zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载
- 采用了 延迟加载 技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀
- 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
- 支持 JSON 数据
- 支持静态 和 Ajax 异步加载节点数据
- 支持任意更换皮肤 / 自定义图标（依靠css）
- 支持极其灵活的 checkbox 或 radio 选择功能
- 提供多种事件响应回调
- 灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟
- 在一个页面内可同时生成多个 Tree 实例
- 简单的参数配置实现 灵活多变的功能
详见官网：http://www.treejs.cn/v3/main.php#_zTreeInfo
二、ztree.js简单实例
ztree.js在使用上需要设置三部分内容。第一部分是setting即配置，第二部分是提供json数据，第三部分是初始化。
1、setting的配置。官方API中给出的有6部分内容，分别是async、callback、check、data、edit和view。顾名思义，async就是异步的配置，callback即返回函数，以此类推。但是通常并不是都需要设置，具体要看使用情况，甚至可以为空。例如下面这段简单的setting配置：
var setting = {
data: {
simpleData: {
enable: true
}
}
};
2、json数据，符合数据格式要求即可。例如：
var zNodes =[
{ id:1, pId:0, name:"父节点1 - 展开", open:true},
{ id:11, pId:1, name:"父节点11 - 折叠"},
{ id:111, pId:11, name:"叶子节点111"},
{ id:112, pId:11, name:"叶子节点112"},
{ id:113, pId:11, name:"叶子节点113"},
{ id:114, pId:11, name:"叶子节点114"},
{ id:12, pId:1, name:"父节点12 - 折叠"},
{ id:121, pId:12, name:"叶子节点121"},
{ id:122, pId:12, name:"叶子节点122"},
{ id:123, pId:12, name:"叶子节点123"},
{ id:124, pId:12, name:"叶子节点124"},
{ id:13, pId:1, name:"父节点13 - 没有子节点", isParent:true},
{ id:2, pId:0, name:"父节点2 - 折叠"},
{ id:21, pId:2, name:"父节点21 - 展开", open:true},
{ id:211, pId:21, name:"叶子节点211"},
{ id:212, pId:21, name:"叶子节点212"},
{ id:213, pId:21, name:"叶子节点213"},
{ id:214, pId:21, name:"叶子节点214"},
{ id:22, pId:2, name:"父节点22 - 折叠"},
{ id:221, pId:22, name:"叶子节点221"},
{ id:222, pId:22, name:"叶子节点222"},
{ id:223, pId:22, name:"叶子节点223"},
{ id:224, pId:22, name:"叶子节点224"},
{ id:23, pId:2, name:"父节点23 - 折叠"},
{ id:231, pId:23, name:"叶子节点231"},
{ id:232, pId:23, name:"叶子节点232"},
{ id:233, pId:23, name:"叶子节点233"},
{ id:234, pId:23, name:"叶子节点234"},
{ id:3, pId:0, name:"父节点3 - 没有子节点", isParent:true}
];
3、初始化。初始化基本格式如下：
$(document).ready(function(){
// 提供三项内容：1、jQuery对象，2、配置项，3、json数据
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
三、ztree.js的异步加载
1、基础案例
// 配置
var setting = {
async: {
enable: true,
url:"../asyncData/getNodes.php",
autoParam:["id", "name=n", "level=lv"],
otherParam:{"otherParam":"zTreeAsyncTest"},
dataFilter: filter
}
};
// 数据预处理
function filter(treeId, parentNode, childNodes) {
if (!childNodes) return null;
for (var i=0, l=childNodes.length; i<l; i++) {
childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
}
return childNodes;
}
// 初始化
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting);
});
注：配置选项中的otherParam是 Ajax 请求提交的静态参数键值对，可以向后台接口传递参数，好比jQuery里面Ajax()方法中的Data参数；dataFilter是用于对 Ajax 返回数据 进行预处理 的函数，就是异步加载完成，对数据进行二次加工的方法。以上两种方法都是在[setting.async.enable = true 时生效]（废话）。
2、实际情况
在项目开发的时候，我们后台使用的是Java语言，返回的是json数据。这时候一种情况是可以直接在url中调用后台接口（Java中通常为web.xml文件配置的接口，或者是spring配置的接口），用otherParam向后台接口提交多个request参数。otherParam提交参数有数组和JSON对象两种格式，JSON格式如：{ "id":"1", "name":"test"}）。（墙裂推荐使用直接调用Java后台方法的这种方式）
还有一种变通的方法就是将url设置为一个空的方法，然后在对数据进行预处理 的时候在dataFileter中添加具体的异步方法。这两种方法都可以实现向后台发起异步请求，后一种方法只需要写一个异步的函数体，然后在dataFilter中调用即可，这种方法比较直观，但并不是好的方法，因为插件已经提供了上边提及的异步方法。
var treeObjNew, prefex;
var getSysTreeSetting = {
async: {
autoParam:["id"],
enable: true,
otherParam:{"id":"0"},
url: getUrl, // 设置一个空方法，但值不能为空。
dataFilter: filter
},
data: {
key: {
name:"name"
},
simpleData: {
enable: true,
idKey: "id",
pIdKey: "parentId"
}
},
view: {
},
callback: {
beforeClick: filter,
onClick: function (event, treeId, treeNode, clickFlag) {
// 注：参数含义详见官网API
}
},
};
function getUrl(){};
function filter(treeId, treeNode, responseData)){
// 根据DOMId获取ztree内部对象
var treeObj = $.fn.zTree.getZTreeObj("tree");
***省略异步请求***
// 仅为示例，只做参考
$.ajax({
url:"***",
.
.
.
success:function(data){
console.log(data);
responseData = data;
return responseData;
}
});
}
值得注意的是，ztree.js在setting里面添加方法的时候，都包含有两个隐藏参数，即treeId和treeNode。也就是说类似于dataFilter:filter这个配置，dataFilter会传这两个参数给filter方法，不需要另行设置，同时filter还会包含一个responseData的默认参数，它是Ajax完成后返回的JSON数据，使用这个参数就可以对返回数据进行二次加工。详见官网API。
网友评论