jQuery.zTree的跳坑记录

最近项目用到树型结构的交互，一开始并不打算选择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交互也实现了，也保证所选数据结构正确，才能正常使用。