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 onAsyncSuess(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().-},);//是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、在onAsyncSuess方法中调用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、在onAsyncSuess方法中,判定当节点展开完毕后,获取节点A的偏移量,并将值赋给树所在DIV的scrollTop属性。
$("#treeDiv1").animate({scrollTop:$("#"+devicesSelect.selectNodeId).offset().-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().-200);】这种方式的,虽然有效,同层节点过多时候,还是不能进入可视区域,我深深的怀疑是因为这个时候树还没展开,所以我就用了动画,无赖之举。
笔者的话如果本文有任何错误,敬请看官火辣指出,不胜感激涕零。。。。
以上内容是本文给大家介绍ztree获取选中节点时不能进入可视区域出现BUG如何解决的全部叙述,希望大家喜欢。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程