Ztree插件，定位节点时（focus）不能进入可视区域BUG解决方案

2024-04-27 15:03:00

字体：大中小

来源：转载

供稿：网友

相关插件版本：

jquery.ztree.exedit-3.4.js

jquery.ztree.all-3.4.js

jquery-1.8.0.js

 1     function onAsyncSuccess(event, treeId, treeNode, msg) { 2         curAsyncCount--; 3         if (curStatus == "expand") { 4             expandNodes(treeNode.children); 5         } else if (curStatus == "async") { 6             asyncNodes(treeNode.children); 7         }  8         if (curAsyncCount <= 0) { 9             curStatus = "";10             // 节点定位11             if(devicesSelect.selectNodeId){12                 // 节点变成被选中状态13                 var zTree = $.fn.zTree.getZTreeObj(zTreeId);14                 zTree.cancelSelectedNode();15                 $("#" + devicesSelect.selectNodeId + "_a").addClass("curSelectedNode");16                 $("#treeDiv1").animate({scrollTop:$("#"+devicesSelect.selectNodeId).offset().top-300},1000);//1000是ms,也可以用slow代替17                 devicesSelect.selectNodeId = "";18             }19         }20     }

 1     function expandNodes(nodes) { 2         if (!nodes) return; 3         curStatus = "expand"; 4         var zTree = $.fn.zTree.getZTreeObj(zTreeId); 5         for (var i=0, l=nodes.length; i<l; i++) { 6             if(ids.indexOf(nodes[i].id) != -1){ 7                 if (nodes[i].isParent&&(ids.substring(0,ids.indexOf(","))!=nodes[i].id)) { 8                     if(nodes[i].typeName.indexOf("虚拟")=="-1"){ 9                         zTree.expandNode(nodes[i], true, false, false);10                     } else if(nodes[i].type.indexOf(type)>"-1"){11                         zTree.expandNode(nodes[i], true, false, false);12                     }13                 } else {14                     goAsync = true;15                 }16             }17         }18         if(goAsync==true){19             var id_ = ids.substring(0,ids.indexOf(","));20             var node = zTree.getNodeByParam("id",id_);21             goAsync = false;22             me.curStatus = "";23             me.type = "";24             me.selectNodeId = node.tId;25         }26     }

定位思路：
1、假设要定位节点A，该节点A的唯一标识是objid

2、根据objid从db中获取所有上级的objid，拼接并保存在ids变量。

3、在onAsyncSuccess方法中调用expandNodes，该方法中通过[if (nodes[i].isParent&&(ids.substring(0,ids.indexOf(","))!=nodes[i].id))]过滤，展开id在ids里的节点。

4、通常情况看下，在展开最后，依据objid通过【var node = zTree.getNodeByParam("id",id_);】获取节点A对象，然后通过【zTree.selectNode(node);】选择节点。

这种情况下，能够定位并选择目标节点，但是，当与该节点有同一父节点的数据较多时，节点A可能不会出现在可视区域内。查找源码，发现Ztree用的是【$("#" + node.tId).focus().blur();】方法实现定位。但很遗憾，有BUG。

于是，使用控制滚动条的方式自己控制定位。实现方式如下：

1、删除【zTree.selectNode(node);】，防止定位冲突

2、在onAsyncSuccess方法中，判定当节点展开完毕后，获取节点A的偏移量，并将值赋给树所在DIV的scrollTop属性。

$("#treeDiv1").animate({scrollTop:$("#"+devicesSelect.selectNodeId).offset().top-300},1000);//1000是ms,也可以用slow代替

注：devicesSelect.selectNodeId为节点A的节点tid，通过【me.selectNodeId = node.tId】获取；treeDiv1树所在div的id属性

3、取消之前选中节点：zTree.cancelSelectedNode();

4、为节点A增加被选中状态class：$("#" + devicesSelect.selectNodeId + "_a").addClass("curSelectedNode");

笔者淡淡的说：第2点我本来想用【$("#treeDiv1").scrollTop($("#"+devicesSelect.selectNodeId).offset().top-200);】这种方式的，虽然有效，但是同层节点过多时候，还是不能进入可视区域，我深深的怀疑是因为这个时候树还没展开，所以我就用了动画，无赖之举。

笔者最后的话：如果本文有任何错误，敬请看官火辣指出，不胜感激涕零。。。。

上一篇：基于jQuery超级酷动画滑动插件

下一篇：jQuery-1.9.1源码分析系列（十五）动画处理