jQuery.zTree的跳坑记录

时间：2021-06-18 08:23:51

最近项目用到树型结构的交互，一开始并不打算选择zTree,为了项目进度我妥协了，这一妥协后果就是我进坑了，在2天的挣扎中，我终于跳出坑了，活了下来，有一些感慨纪录下来。

有一个业务场景需要2个树型结构，一个初始化树型结构，标示为左树，另一个则是为选择后生成的新树结构，标示为右树；

首先在左树选择要使用的数据，点击新增在右树展示所选的数据的新树结构。

这个功能在jquery.zTree的API里面是没有的。

jQuery.zTree的跳坑记录

原本以为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交互也实现了，也保证所选数据结构正确，才能正常使用。

相关文章