收藏一个好的用例:
功能需求:
有一个业务场景需要2个树型结构,一个初始化树型结构,标示为左树,另一个则是为选择后生成的新树结构,标示为右树;
首先在左树选择要使用的数据,点击新增在右树展示所选的数据的新树结构。
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交互也实现了,也保证所选数据结构正确,才能正常使用。