相关插件版本:

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. vim快捷键整理(转载)

    一.移动光标 1.左移h.右移l.下移j.上移k2.向下翻页ctrl + f,向上翻页ctrl + b3.向下翻半页ctrl + d,向上翻半页ctrl + u4.移动到行尾$,移动到行首0(数字), ...

  2. ScrollMagic – 酷毙了!超炫的页面滚动交互效果

    ScrollMagic 是一款 jQuery 插件,它让你可以像使用进度条一样使用滚动条.如果你想在特定的滚动位置开始一个动画,并且让动画同步滚动条的动作,或者把元素粘在一个特定的滚动位置,那么这款插 ...

  3. react实例之todo,做一个实时响应的列表操作

    react实例之todo, 做一个实时响应的列表操作 在所有的mvc框架中,最常见的例子不是hello world,而是todo,由于reactjs的简单性,在不引用flux和redux的情况下,我们 ...

  4. 妙用Javascript中apply、call、bind

    对apply.call.bind的认识,并且列出一些它们的妙用加深记忆.   apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(cont ...

  5. ie8不兼容rgba的解决

    借鉴................. 在调试ie8兼容性的问题时,发现ie8不支持rgba. 关于rgba(),即为颜色设置的方法函数,rgb代表颜色,a代表透明度. 如rgba(0,0,0,0.1 ...

  6. SAP (ABAP) 常用的数学函数

    Function func Return value abs Absolute value of the argument arg (绝对值) sign Plus/minus sign of the ...

  7. IOS开发札记

    //遍历所有的子控件,并打印其Frame +(NSString )searchAllSubviews:(UIView )superview { NSMutableString xml = [NSMut ...

  8. Core Animation - 核心动画

    CAAnimation类,是一个抽象类.遵循CAMediaTiming协议和CAAction协议! CAMediaTiming协议 可以调整时间,包括持续时间,速度,重复次数. CAAction协议  ...

  9. Fragment中的按键监听

    在Fragmentzhong中写按键监听,有两处处需要注意: 1)是否是当前显示的fragment:. 2)在所依托的activity中的onKeyDown方法处理监听事件: 其他地方和普通按键监听一 ...

  10. 论使用LeanCloud中遇到的坑

    1.短信验证码 当注册用户的时候,会发现收不到短信验证码,打印e : That operation isn't allowed for clients. 含义 - 该操作无法从客户端发起.请检查该错误 ...