Ztree插件,定位节点时(focus)不能进入可视区域BUG解决方案
相关插件版本:
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 <= 0) {
curStatus = "";
// 节点定位
if(devicesSelect.selectNodeId){
// 节点变成被选中状态
var zTree = $.fn.zTree.getZTreeObj(zTreeId);
zTree.cancelSelectedNode();
$("#" + devicesSelect.selectNodeId + "_a").addClass("curSelectedNode");
$("#treeDiv1").animate({scrollTop:$("#"+devicesSelect.selectNodeId).offset().top-300},1000);//1000是ms,也可以用slow代替
devicesSelect.selectNodeId = "";
}
}
}
function expandNodes(nodes) {
if (!nodes) return;
curStatus = "expand";
var zTree = $.fn.zTree.getZTreeObj(zTreeId);
for (var i=0, l=nodes.length; i<l; i++) {
if(ids.indexOf(nodes[i].id) != -1){
if (nodes[i].isParent&&(ids.substring(0,ids.indexOf(","))!=nodes[i].id)) {
if(nodes[i].typeName.indexOf("虚拟")=="-1"){
zTree.expandNode(nodes[i], true, false, false);
} else if(nodes[i].type.indexOf(type)>"-1"){
zTree.expandNode(nodes[i], true, false, false);
}
} else {
goAsync = true;
}
}
}
if(goAsync==true){
var id_ = ids.substring(0,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插件,定位节点时(focus)不能进入可视区域BUG解决方案的更多相关文章
- ztree获取选中节点时不能进入可视区域出现BUG如何解决
zTree 是一个依靠 jQuery 实现的多功能 “树插件”.优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. zTree 的特点编辑 ● zTree v3.0 将核心代码按照功能进 ...
- bootstrap的popover插件在focus模式时在Safari浏览器无法使用的bug解决方案
前言 最近在使用bootstrap的popover插件,效果如下: popover插件的focus模式时表现为当点击按钮时弹出浮动层,在点击浮动层外的任何一处,都隐藏浮动层. 但是在mac下的Safa ...
- zTree重命名节点时,操作的那个dom(类似input框那个)怎么写
<script type="text/javascript"> //tree的编辑节点的方法 ztree.editName(nodeNew[0]); /// $(&qu ...
- input聚焦时,滚动至可视区域
这里的代码来自vux,觉得vux处理得很好,在此记录一下. 当我们在手机上填表单的时候,我们会希望正在填的input或者textarea会自动滚动至可视区域,方便我们边填写边查看内容.以前我的做法是, ...
- vue input聚焦时,滚动至可视区域
这里的代码来自vux,觉得vux处理得很好,在此记录一下.当我们在手机上填表单的时候,我们会希望正在填的input或者textarea会自动滚动至可视区域,方便我们边填写边查看内容.以前我的做法是,获 ...
- Jstree 使用CheckBox插件 选中父节点时被禁用的子节点也会选中问题
问题描述: 最近用jstree遇到一个问题,使用CheckBox插件时,当父节点选中时,被禁用的子节点也会选中如下 解决方案: 1. 将jstree升级到最新的版本,v3.3.4及以上就可以 2. ...
- JQuery/JS插件 jsTree加载树,预先加载,初始化时加载前三级节点,当展开第三级节点时 就加载该节点下的所有子节点
jsTree加载树, 初始化时 加载前三级节点, 当展开第三级节点时 就加载该节点下的所有子节点 html: <!DOCTYPE html> <html> <head&g ...
- ztree 获取CheckBox选中节点时,不获取选中上级父节点
//将第三个参数改为false,表示不去勾选父节点下的所有子节点 zTreeObj.checkNode(node, true, false); setting.check.chkboxType = { ...
- ztree插件的使用
在bootstrap中使用ztree插件做树形架构,由于觉得原始的树形不够美观,所以改了其中的css插件 demo演示,以及各种属性的用法网站: http://www.treejs.cn/v3/de ...
随机推荐
- Bootstrap Table表格一直加载(load)不了数据-解决办法
bootstrap-table是一个基于Bootstrap风格的强大的表格插件神器,官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 这里列出遇到的一 ...
- C语言的关键字,运算符,标识符
关键字 数据类型修饰相关 auto按照自动的方式进行变量的存储 const定义常量或常参数 extern声明外部变量或函数 register指定变量的存储类型是寄存器变量 static指定变量的存储类 ...
- jquery $(document).ready() 与window.onload
- Java数组排序和查找
Java 1.2 添加了自己的一套实用工具,可用来对数组或列表进行排列和搜索.这些工具都属于两个新类的"静态"方法.这两个类分别是用于排序和搜索数组的Arrays,以及用于排序和搜 ...
- linux下使用taskset设置进程cpu绑定不起作用
自从大规模使用了虚拟化之后,大流量时soft interrupt在某个cpu很高就是个严重的问题,最近一有时间就研究这个问题,如果网卡本身不支持多队列的话,有没有办法缓解这个问题. 一开始使用rps, ...
- C#调用C和C++函数的一点区别
最近做U800电话的二次开发,需要调用厂商的C函数库来打电话,后来想加入通话录音功能,但发现程序默认生产的WAV文件过大,又找了个WAV转MP3的C++函数库程序,出了点问题.下面是转MP3的程序接口 ...
- java多线程-线程创建
Java 线程类也是一个 object 类,它的实例都继承自 java.lang.Thread 或其子类. 可以用如下方式用 java 中创建一个线程,执行该线程可以调用该线程的 start()方法: ...
- 实战手记:让百万级数据瞬间导入SQL Server
想必每个DBA都喜欢挑战数据导入时间,用时越短工作效率越高,也充分的能够证明自己的实力.实际工作中有时候需要把大量数据导入数据库,然后用于各种程序计算,本文将向大家推荐一个挑战4秒极限让百万级数据瞬间 ...
- css小技巧,会不断更新的
1.去除input记住密码后自动填充表单的黄色背景 input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #FFF inset; }/ ...
- javascript之DOM
文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...