Ztree插件,定位节点时(focus)不能进入可视区域BUG解决方案

相关插件版本:

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);】这种方式的,虽然有效,但是同层节点过多时候,还是不能进入可视区域,我深深的怀疑是因为这个时候树还没展开,所以我就用了动画,无赖之举。

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

时间: 2024-10-23 01:06:12

Ztree插件,定位节点时(focus)不能进入可视区域BUG解决方案的相关文章

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

zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. zTree 的特点编辑 ● zTree v3.0 将核心代码按照功能进行了分割,不需要的代码可以不用加载● 采用了延迟加载技术,上万节点轻松加载,即使在 IE6 下也能基本做到秒杀● 兼容 IE.FireFox.Chrome.Opera.Safari 等浏览器● 支持 JSON 数据● 支持静态和 Ajax 异步加载节点数据● 支持任意更换皮肤 / 自定义图

bootstrap的popover插件在focus模式时在Safari浏览器无法使用的bug解决方案

前言 最近在使用bootstrap的popover插件,效果如下: popover插件的focus模式时表现为当点击按钮时弹出浮动层,在点击浮动层外的任何一处,都隐藏浮动层. 但是在mac下的Safari浏览器中无法弹出浮动层,bug导致原因未知,官方demo也是如此. 解决方案 最后反复试验,发现一种解决方案,非常简单,即在给按钮绑定鼠标事件,然后手动触发dom的focus事件,也就连带触发了popover插件的显示事件. var $btn=$(".btn"); $btn.mouse

JQuery/JS插件 jsTree加载树,初始化时加载前三级节点,当展开第三级节点时 就加载该节点下的所有子节点

jsTree加载树, 初始化时 加载前三级节点, 当展开第三级节点时 就加载该节点下的所有子节点 html: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="plugins1"></div> <link

ztree 获取CheckBox选中节点时,不获取选中上级父节点

setting.check.chkboxType = { "Y" : "s", "N" : "s" };Y指的是勾选checkbox的时候对父结点或子结点产生的影响N指的是取消checkbox的时候对父结点或子结点产生的影响s指子结点,p指父结点 //ztree获取选中节点 var checkedNodes = zTreeObj.getCheckedNodes(); 原文地址:https://www.cnblogs.com/c

使用zTree插件构建树形菜单

zTree下载:https://github.com/zTree/zTree_v3 目录: 就我看来,zTree较为实用的有以下几点: zTree 是一个依靠 jQuery 实现的多功能 “树插件”.优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 支持 JSON 数据 支持静态 和 Ajax 异步加载节点数据 支持任意更换皮肤 / 自定义图标 支持极其灵活的 checkbox 或 radio 选择功能 提供多种事件响应回调 灵活的编辑(增/删/改/查)功能,可随意拖拽节点,还可

jQuery zTree插件

jsp页面: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+reque

用XPath精确定位节点元素&amp;selenium使用Xpath定位之完整篇

在利用XSL进行转换的过程中,匹配的概念非常重要.在模板声明语句 xsl:template match = ""和模板应用语句xsl:apply-templates select = "" 中,用引号括起来的部分必须能够精确地定位节点.具体的定位方法则在XPath中给出. 之所以要在XSL中引入XPath的概念,目的就是为了在匹配XML文档结构树时能够准确地找到某一个节点元素.可以把XPath比作文件管理路 径:通过文件管理路径,可以按照一定的规则查找到所需要的文件

zTree的getChangeCheckedNodes()使用心得以及一次性获取zTree的所有节点

zTree的getChangeCheckedNodes()方法用于获取输入框勾选状态被改变的节点集合.如果需要获取每次操作后全部被改变勾选状态的节点数据,请在每次勾选操作后,遍历所有被改变勾选状态的节点数据,让其 checkedOld = checked 就可以了. 问题一:checkedOld是什么?仔细查看api会发现“treeNode 节点数据详解”模块有一个叫作checkedOld的excheck扩展属性,表示节点的 checkBox / radio 在初始化时的勾选状态.[settin

zTree插件实现菜单树

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <title>Title</title> 7 <link href="JS/tool/zT