相关插件版本:
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);】这种方式的,虽然有效,但是同层节点过多时候,还是不能进入可视区域,我深深的怀疑是因为这个时候树还没展开,所以我就用了动画,无赖之举。
笔者最后的话:如果本文有任何错误,敬请看官火辣指出,不胜感激涕零。。。。