相关插件版本:

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解决方案的更多相关文章

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

    zTree 是一个依靠 jQuery 实现的多功能 “树插件”.优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. zTree 的特点编辑 ● zTree v3.0 将核心代码按照功能进 ...

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

    前言 最近在使用bootstrap的popover插件,效果如下: popover插件的focus模式时表现为当点击按钮时弹出浮动层,在点击浮动层外的任何一处,都隐藏浮动层. 但是在mac下的Safa ...

  3. zTree重命名节点时,操作的那个dom(类似input框那个)怎么写

    <script type="text/javascript"> //tree的编辑节点的方法 ztree.editName(nodeNew[0]); /// $(&qu ...

  4. input聚焦时,滚动至可视区域

    这里的代码来自vux,觉得vux处理得很好,在此记录一下. 当我们在手机上填表单的时候,我们会希望正在填的input或者textarea会自动滚动至可视区域,方便我们边填写边查看内容.以前我的做法是, ...

  5. vue input聚焦时,滚动至可视区域

    这里的代码来自vux,觉得vux处理得很好,在此记录一下.当我们在手机上填表单的时候,我们会希望正在填的input或者textarea会自动滚动至可视区域,方便我们边填写边查看内容.以前我的做法是,获 ...

  6. Jstree 使用CheckBox插件 选中父节点时被禁用的子节点也会选中问题

    问题描述: 最近用jstree遇到一个问题,使用CheckBox插件时,当父节点选中时,被禁用的子节点也会选中如下 解决方案: 1.  将jstree升级到最新的版本,v3.3.4及以上就可以 2. ...

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

    jsTree加载树, 初始化时 加载前三级节点, 当展开第三级节点时 就加载该节点下的所有子节点 html: <!DOCTYPE html> <html> <head&g ...

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

    //将第三个参数改为false,表示不去勾选父节点下的所有子节点 zTreeObj.checkNode(node, true, false); setting.check.chkboxType = { ...

  9. ztree插件的使用

    在bootstrap中使用ztree插件做树形架构,由于觉得原始的树形不够美观,所以改了其中的css插件 demo演示,以及各种属性的用法网站:  http://www.treejs.cn/v3/de ...

随机推荐

  1. C++学习笔记13:运算符重载(赋值操作符2)

    移动语义 完成所有权的移交,当拷贝构造和赋值构造时,目标对象的所有权必须移交给我们的新的对象,原始对象将丧失所有权,_p指针将不再指向原来的那个数组: 左值与右值 C原始定义 左值:可以出现在赋值号的 ...

  2. JS的预编译和执行顺序 详析(及全局与局部变量)

    最近在复习javascript的事件处理时发现了一个问题,于是总结一下:javascript的预编译和执行顺序的问题:   <html> <head> <title> ...

  3. 使用PhpStrom等IDE编辑 远程linux服务器上的文件 实时更新

    习惯了在linux上 vim进行PHP的开发,突然忘了IDE的感觉,所以想到了.通过PhpStrom等IDE直接编辑 samba共享到 mac或者windows本地的磁盘进行编辑. 为了忘却的纪念,有 ...

  4. windows server 2003安装sp4时的问题

    "以前进行的程序安装创建了挂起的文件操作.运行程序之前,必须重新起动计算机."的解决办法 在安装SQL 2000数据库和SQLSP4补丁时,经常会提示“以前进行的程序安装创建了挂起 ...

  5. jQuery Sidebar 侧边栏

    在线实例 左边栏 右边栏 使用方法     <div class="txt">             <p class="btn"> ...

  6. [js开源组件开发]模拟下拉选项框select

    模拟下拉选项框select 在css3流行的情况下,下拉框还是无法满足PD的需求,所以有了autosearch,有了模拟下拉框.效果如下图: select DEMO请案例点击这里查看.http://w ...

  7. Error: Error setting TTL index on collection : sessions

    Error: Error setting TTL index on collection : sessions 一.步骤一: 这个问题一般是直接升级 mongodb和connect-mongo的版本为 ...

  8. datagridview的数据存取

    这里主要是复习DataSet等数据或ADO.NET方面的知识.下面是一个简单的数据存储(在DataGridView上增加一行然后并存储到数据库的过程): private void button1_Cl ...

  9. 《The Linux Command Line》 读书笔记04 Linux用户以及权限相关命令

    Linux用户以及权限相关命令 查看身份 id:Display user identity. 这个命令的输出会显示uid,gid和用户所属的组. uid即user ID,这是账户创建时被赋予的. gi ...

  10. 跨越千年的RSA算法

    转载自http://www.matrix67.com/blog/archives/5100 数论,数学中的皇冠,最纯粹的数学.早在古希腊时代,人们就开始痴迷地研究数字,沉浸于这个几乎没有任何实用价值的 ...