ztree获取选中节点时不能进入可视区域出现BUG如何解决【jquery】

web前端|js教程 ztree获取选中节点时不能进入可视区域出现BUG如何解决【jquery】

ztree获取选中节点,ztree设置节点选中,ztree选中节点

web前端-js教程

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

楼中楼源码设置,vscode上显示分支名称,ubuntu 下载快,本地tomcat启动不来,爬虫生成页面,asp和php比较,江西站外seo优化排名,学校asp网站,ecshop服装模板lzw

zTree 的特点编辑

fh admin 全部源码,ubuntu安装有锁,tomcat加入到程序,直播助手爬虫,php在线作业,东莞关键词seo推广代运营lzw

● zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载
● 采用了延迟加载技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀
● 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
● 支持 JSON 数据
● 支持静态和 Ajax 异步加载节点数据
● 支持任意更换皮肤 / 自定义图标（依靠css）
● 支持极其灵活的 checkbox 或 radio 选择功能
● 提供多种事件响应回调
● 灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟
● 在一个页面内可同时生成多个 Tree 实例
● 简单的参数配置实现灵活多变的功能

apache源码下载,vscode远程调试树莓派,网络配置ubuntu,tomcat 输出所有日志,卡地亚爬虫系列,php java 通讯,杭州seo关键词公司,游戏下载网站 asp.net源码下载,微擎精美企业官网模板免费下载lzw

zTree 的优势编辑

zTree 的作者利用业余时间不断改进 zTree 功能，并且还能及时与用户沟通，及时回复各种疑问，便于新用户快速掌握。目前越来越多的用户都使用 zTree 替换了系统中原有的树插件，这其中包括最近刚发布最新版本的QUI框架。

相关插件版本：

jquery.ztree.exedit-3.4.js

jquery.ztree.all-3.4.js

jquery-1.8.0.js

 function onAsyncSuccess(event, treeId, treeNode, msg) {     curAsyncCount--;     if (curStatus == "expand") {       expandNodes(treeNode.children);     } else if (curStatus == "async") {       asyncNodes(treeNode.children);     }      if (curAsyncCount <= ) {       curStatus = "";       // 节点定位       if(devicesSelect.selectNodeId){         // 节点变成被选中状态         var zTree = $.fn.zTree.getZTreeObj(zTreeId);         zTree.cancelSelectedNode();         $("#" + devicesSelect.selectNodeId + "_a").addClass("curSelectedNode");         $("#treeDiv").animate({scrollTop:$("#"+devicesSelect.selectNodeId).offset().top-},);//是ms,也可以用slow代替         devicesSelect.selectNodeId = "";       }     }   }    function expandNodes(nodes) {     if (!nodes) return;     curStatus = "expand";     var zTree = $.fn.zTree.getZTreeObj(zTreeId);     for (var i=, l=nodes.length; i"-"){             zTree.expandNode(nodes[i], true, false, false);           }         } else {           goAsync = true;         }       }     }     if(goAsync==true){       var id_ = ids.substring(,ids.indexOf(","));       var node = 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通过【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);】这种方式的，虽然有效，但是同层节点过多时候，还是不能进入可视区域，我深深的怀疑是因为这个时候树还没展开，所以我就用了动画，无赖之举。

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

以上内容是本文给大家介绍ztree获取选中节点时不能进入可视区域出现BUG如何解决的全部叙述，希望大家喜欢。

暂无相关文章