最近项目用到树型结构的交互，一开始并不打算选择zTree,为了项目进度我妥协了，这一妥协后果就是我进坑了，在2天的挣扎中，我终于跳出坑了，活了下来，有一些感慨纪录下来。
有一个业务场景需要2个树型结构，一个初始化树型结构，标示为左树，另一个则是为选择后生成的新树结构，标示为右树；
首先在左树选择要使用的数据，点击新增在右树展示所选的数据的新树结构。
这个功能在jquery.zTree的API里面是没有的。
原本以为zTree可以给我一个很好的封装实现，结果懵逼都来不急。没有这样的实现，没辙了改造，在jquery.zTree代码中封装了一个方法来实现这样的移植功能。
代码如下：
getStarNodes: function () {
var tp = [];
var list = [];
//获取当前树选择的数据结构
var treeData = data.getRoot(setting).children;
//数据移植到新变量上操作
var par = $.extend(true, [], treeData);
for (var i = 0; i < par.length; i++) {
if (par[i].checked == true) {
tp = [];
for (var j = 0; j < par[i].children.length; j++) {
if (par[i].children[j].checked == true) {
tp.push(par[i].children[j]);
}
}
par[i].children = tp;
list.push(par[i])
}
}
return list;
}
在上段代码中：
变量tp是个临时数组
变量list是装最终的数据的数组
变量treeData是通过zTree中getRoo方式获取数据
getRoot: function (setting) {
return setting ? roots[setting.treeId] : null;
}
在这里直接return roots[setting.treeId] 如果setting对象是false则返回null。zTree中初始就定义了roots={}，用roots保存完整数据，
注意：当treeData获取到数据是数组形式，不能直接for循环操作其数组，因为会在获取数据中的children重新赋值，par[i].children = tp;如果拿原来数据结构的则造成数据混乱，必须复制一个独立的数据进行操作，这样才能把原数据和操作之后的数据隔离开，这里用jquery的extend方法来实现数据移植。
在树对象新增操作的时候直接调用getStarNodes即可：
var tree1 = $.fn.zTree.getZTreeObj("tree");
var nodeList = tree1.getStarNodes();
将nodeList（通过getStarNodes方式过滤的数组）传给新树对象中去
var tree2 = $.fn.zTree.getZTreeObj("tree2");
tree2.addNodes(null, nodeList, null);
新树对象tree2就可以拿这个数据结构遍历了。这个功能就这样实现了。在这个操作中，我们用到addNodes方法，但是我用的发现一个bug。在我每次点击新增的时候就addNodes就会上次选择的数据继续累加在新的数据里面，我加了一个清空处理数据就不会出现重复累加。下面zTree源码中操作
addNodes: function (setting, parentNode, index, newNodes, isSilent) {
if (setting.data.keep.leaf && parentNode && !parentNode.isParent) {
return;
}
if (!tools.isArray(newNodes)) {
newNodes = [newNodes];
}
if (setting.data.simpleData.enable) {
newNodes = data.transformTozTreeFormat(setting, newNodes);
}
if (parentNode) {
var target_switchObj = $$(parentNode, consts.id.SWITCH, setting),
target_icoObj = $$(parentNode, consts.id.ICON, setting),
target_ulObj = $$(parentNode, consts.id.UL, setting);
if (!parentNode.open) {
view.replaceSwitchClass(parentNode, target_switchObj, consts.folder.CLOSE);
view.replaceIcoClass(parentNode, target_icoObj, consts.folder.CLOSE);
parentNode.open = false;
target_ulObj.css({
"display": "none"
});
}
data.addNodesData(setting, parentNode, index, newNodes);
view.createNodes(setting, parentNode.level + 1, newNodes, parentNode, index);
if (!isSilent) {
view.expandCollapseParentNode(setting, parentNode, true);
}
} else {
//在这里对数据进行清空处理，这样方式是处理方法其中之一
data.getRoot(setting).children = [];
data.addNodesData(setting, data.getRoot(setting), index, newNodes);
view.createNodes(setting, 0, newNodes, null, index);
}
}
这样UI交互也实现了，也保证所选数据结构正确，才能正常使用。