ztree获取选中节点时不能进入可视区域出现BUG如何解决
zTree是一个依靠jQuery实现的多功能“树插件”。优异的性能、灵活的配置、多种功能的组合是zTree最大优点。
zTree的特点编辑
●zTreev3.0将核心代码按照功能进行了分割，不需要的代码可以不用加载
●采用了延迟加载技术，上万节点轻松加载，即使在IE6下也能基本做到秒杀
●兼容IE、FireFox、Chrome、Opera、Safari等浏览器
●支持JSON数据
●支持静态和Ajax异步加载节点数据
●支持任意更换皮肤/自定义图标（依靠css）
●支持极其灵活的checkbox或radio选择功能
●提供多种事件响应回调
●灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟
●在一个页面内可同时生成多个Tree实例
●简单的参数配置实现灵活多变的功能
zTree的优势编辑
zTree的作者利用业余时间不断改进zTree功能，并且还能及时与用户沟通，及时回复各种疑问，便于新用户快速掌握。目前越来越多的用户都使用zTree替换了系统中原有的树插件，这其中包括最近刚发布最新版本的QUI框架。
相关插件版本：
jquery.ztree.exedit-3.4.js
jquery.ztree.all-3.4.js
jquery-1.8.0.js
functiononAsyncSuccess(event,treeId,treeNode,msg){
curAsyncCount--;
if(curStatus=="expand"){
expandNodes(treeNode.children);
}elseif(curStatus=="async"){
asyncNodes(treeNode.children);
}
if(curAsyncCount<=){
curStatus="";
//节点定位
if(devicesSelect.selectNodeId){
//节点变成被选中状态
varzTree=$.fn.zTree.getZTreeObj(zTreeId);
zTree.cancelSelectedNode();
$("#"+devicesSelect.selectNodeId+"_a").addClass("curSelectedNode");
$("#treeDiv").animate({scrollTop:$("#"+devicesSelect.selectNodeId).offset().top-},);//是ms,也可以用slow代替
devicesSelect.selectNodeId="";
}
}
}
functionexpandNodes(nodes){
if(!nodes)return;
curStatus="expand";
varzTree=$.fn.zTree.getZTreeObj(zTreeId);
for(vari=,l=nodes.length;i<l;i++){
if(ids.indexOf(nodes[i].id)!=-){
if(nodes[i].isParent&&(ids.substring(,ids.indexOf(","))!=nodes[i].id)){
if(nodes[i].typeName.indexOf("虚拟")=="-"){
zTree.expandNode(nodes[i],true,false,false);
}elseif(nodes[i].type.indexOf(type)>"-"){
zTree.expandNode(nodes[i],true,false,false);
}
}else{
goAsync=true;
}
}
}
if(goAsync==true){
varid_=ids.substring(,ids.indexOf(","));
varnode=zTree.getNodeByParam("id",id_);
goAsync=false;
me.curStatus="";
me.type="";
me.selectNodeId=node.tId;
}
}
定位思路：
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通过【varnode=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);】这种方式的，虽然有效，但是同层节点过多时候，还是不能进入可视区域，我深深的怀疑是因为这个时候树还没展开，所以我就用了动画，无赖之举。
笔者最后的话：如果本文有任何错误，敬请看官火辣指出，不胜感激涕零。。。。
以上内容是本文给大家介绍ztree获取选中节点时不能进入可视区域出现BUG如何解决的全部叙述，希望大家喜欢。