ztree获取选中节点时不能进入可视区域出现BUG如何解决
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
zTree 的特点编辑
● zTree v3.0 将核心代码按照功能进行了分割,不需要的代码可以不用加载
● 采用了延迟加载技术,上万节点轻松加载,即使在 IE6 下也能基本做到秒杀
● 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
● 支持 JSON 数据
● 支持静态和 Ajax 异步加载节点数据
● 支持任意更换皮肤 / 自定义图标(依靠css)
● 支持极其灵活的 checkbox 或 radio 选择功能
● 提供多种事件响应回调
● 灵活的编辑(增/删/改/查)功能,可随意拖拽节点,还可以多节点拖拽哟
● 在一个页面内可同时生成多个 Tree 实例
● 简单的参数配置实现 灵活多变的功能
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<l; i++) {
if
(ids.indexOf(nodes[i].id) != -){
if
(nodes[i].isParent&&(ids.substring(,ids.indexOf(
","
))!=nodes[i].id)) {
if
(nodes[i].typeName.indexOf(
"虚拟"
)==
"-"
){
zTree.expandNode(nodes[i],
true
,
false
,
false
);
}
else
if
(nodes[i].type.indexOf(type)>
"-"
){
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如何解决的全部叙述,希望大家喜欢。
ztree获取选中节点时不能进入可视区域出现BUG如何解决的更多相关文章
- ztree获取选中节点
$(document).ready(function(){ $.fn.zTree.init($("#treeDemo"), setting, zNodes); }); functi ...
- ztree 获取CheckBox选中节点时,不获取选中上级父节点
//将第三个参数改为false,表示不去勾选父节点下的所有子节点 zTreeObj.checkNode(node, true, false); setting.check.chkboxType = { ...
- ztree 获取子节点所有父节点的name的拼接
ztree 获取子节点所有父节点的name的拼接 //获取子节点,所有父节点的name的拼接字符串function getFilePath(treeObj){if(treeObj==null)retu ...
- jsTree获取选中节点和选中指定节点
jstree获取当前选中的checkbox和获取选中节点的所有节点 首先初始化一个带有复选框的 jstree $('#demo_tree').jstree({ "core" : { ...
- jQuery中获取文档的高度、可视区域高度以及滚动条距页面顶部的高度
在写页面的时候,经常会碰到这样的情况,就是要获取文档的高度.可视区域高度或者滚动条距页面顶部的高度等情况. 但我总是有些爱搞混淆了,这里还是简单做个笔记吧,这里只限于使用jQuery来获取. 1.获取 ...
- jstree 获取选中节点的所有子子点
//加载功能树 function initTree() { $.jstree.destroy(); $.ajax({ type: "Get", url: "/Depart ...
- zTree设置选中节点之后出现重复节点
1.用户离开页面时最后一次点击的节点信息我会保存到数据库. 2.用户打开页面时默认选中上一次离开时选中的节点. 现在发现在设置选中节点之后,会出现重复的节点(重复现象偶尔出现). 以下是代码: var ...
- ztree 获取根节点
function getRoot() { var treeObj = $.fn.zTree.getZTreeObj("tree-div"); //返回一个根节点 var node ...
- zTree获取当前节点的下一级子节点数
使用zTree插件实现树形图中,需要获取当前点击的父节点的子节点数的需求,使用treeNode.children获取子节点数据集合,使用length方法获取集合长度.将当前节点的treeNode传入即 ...
随机推荐
- java反射-获取方法信息
例子代码如下: package com.reflect; import java.lang.reflect.Method; public class ClassUtill { /* * 打印类的信息, ...
- Cookie的介绍
Cookie是某些站点为了辨别用户身份而存在用户本地终端上的数据.Cookie总是保存在client中,可分为内存 Cookie和硬盘Cookie,而依照时间划分.又能够分为非持久Cookie和持久C ...
- 10分钟学会搭建Android开发环境 Eclipse: The import android.support cannot be resolved
10分钟学会搭建Android开发环境_隋雨辰 http://v.youku.com/v_show/id_XNTE2OTI5Njg0.html?from=s1.8-1-1.2 The import a ...
- Windows2008 R2下,应用程序池 'XXXXXXXX' 被自动禁用,原因是为此应用程序池提供服务的进程中出现一系列错误。
转:http://www.cnblogs.com/freeton/archive/2012/08/28/2660585.html http://www.hack001.com/post/151
- C#中各种集合类比较
数组(Array)的不足(即:集合与数组的区别) 1. 数组是固定大小的,不能伸缩.虽然System.Array.Resize这个泛型方法可以重置数组大小,但是该方法是重新创建新设置大小的数组,用的是 ...
- (Spring Boot框架)快速入门
Spring Boot 系列文章推荐 Spring Boot 入门 Spring Boot 属性配置和使用 Spring Boot 集成MyBatis Spring Boot 静态资源处理 今天介绍一 ...
- 用注册表更改DNS的代码分享
用注册表更改DNS,1秒切换完毕,快速又方便,不用麻烦的去等待了,支持远程路劲运行 最进我这里DNS老是间歇性掉,很不稳定,广州地区,如果你的DNS经常需要更换,试试这个批处理, 论坛很多人发过了更改 ...
- atitit.激活一个窗口总结 swing java .net php
atitit.激活一个窗口总结 1 激活窗口:鼠标激活vswindows消息激活 1.1 Web框架激活 2 退出激活窗口热键(dbg模式) 3 俩个窗口激活优先级 ...
- po vo
一.PO:persistant object 持久对象,可以看成是与数据库中的表相映射的java对象.使用Hibernate来生成PO是不错的选择. 二.VO:value object值对象.通常用于 ...
- Linux 进程资源用量监控和按用户设置进程限制
每个 Linux 系统管理员都应该知道如何验证硬件.资源和主要进程的完整性和可用性.另外,基于每个用户设置资源限制也是其中一项必备技能. 在这篇文章中,我们会介绍一些能够确保系统硬件和软件正常工作的方 ...