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

网友投稿 266 2023-07-25


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

zTree 是一个依靠 jquery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

zTree 的特点编辑

● zTree v3.0 将核心代码按照功能进行了分割,不需要的代码可以不用加载

● 采用了延迟加载技术,上万节点轻松加载,即使在 IE6 下也能基本做到秒杀

● 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器

● 支持 jsON 数据

● 支持静态和 Ajax 异步加载节点数据

● 支持任意更换皮肤 / 自定义图标(依靠css)

● 支持极其灵活的 checkbox 或 radio 选择功能

● 提供多种事件响应回调

● 灵活的编辑(增/删/改/查)功能,可随意拖拽节点,还可以多节点拖拽哟

● 在一个页面内可同时生成多个 Tree 实例

● 简单的参数配置实现 灵活多变的功能

zTree 的优势编辑

相关插件版本:

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

if(ids.indexOf(nodes[i].id) != -){

if (nodes[i].isParent&&(ids.substring(,ids.indexOf(","))!=nodes[i].id)) {

if(nodes[i].typeName.indexOf("NEeWF虚拟")=="-"){

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").http://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如何解决的全部叙述,希望大家喜欢。

if(ids.indexOf(nodes[i].id) != -){

if (nodes[i].isParent&&(ids.substring(,ids.indexOf(","))!=nodes[i].id)) {

if(nodes[i].typeName.indexOf("NEeWF虚拟")=="-"){

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").http://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如何解决的全部叙述,希望大家喜欢。


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:java必学必会之网络编程
下一篇:java必学必会之线程(1)
相关文章

 发表评论

暂时没有评论,来抢沙发吧~