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


Posted in Javascript onDecember 03, 2015

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

Javascript 相关文章推荐
jquery ajax 同步异步的执行示例代码
Jun 23 Javascript
常用的几段javascript代码分享
Mar 25 Javascript
深入探讨JavaScript String对象
Mar 09 Javascript
jQuery Chart图表制作组件Highcharts用法详解
Jun 01 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
Jul 27 Javascript
bootstrap响应式表格实例详解
May 15 Javascript
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
详解React Native顶|底部导航使用小技巧
Sep 14 Javascript
JavaScript判断输入是否为数字类型的方法总结
Sep 28 Javascript
Vuex入门到上手教程
Jun 20 Javascript
记录一次完整的react hooks实践
Mar 11 Javascript
原生JS实现京东查看商品点击放大
Dec 21 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
Dec 03 #Javascript
JS使用post提交的两种方式
Dec 03 #Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
Dec 03 #Javascript
五种js判断是否为整数类型方式
Dec 03 #Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
Dec 03 #Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
Dec 03 #Javascript
学习JavaScript设计模式(代理模式)
Dec 03 #Javascript
You might like
php检测url是否存在的方法
2015/04/14 PHP
PHP Cookei记录用户历史浏览信息的代码
2016/02/03 PHP
PHP查询附近的人及其距离的实现方法
2016/05/11 PHP
Laravel 5.3 学习笔记之 安装
2016/08/28 PHP
thinkphp下MySQL数据库读写分离代码剖析
2017/04/18 PHP
jQuery弹性滑动导航菜单实现思路及代码
2013/05/02 Javascript
JS实现鼠标单击与双击事件共存
2014/03/08 Javascript
使用script的src实现跨域和类似ajax效果
2014/11/10 Javascript
Jquery实现图片预加载与延时加载的方法
2014/12/22 Javascript
详细解密jsonp跨域请求
2015/04/15 Javascript
nodejs爬虫抓取数据乱码问题总结
2015/07/03 NodeJs
轻松学习jQuery插件EasyUI EasyUI表单验证
2015/12/01 Javascript
AngularJS实现Model缓存的方式
2016/02/03 Javascript
js实现简单的碰壁反弹效果
2016/08/30 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
2016/08/30 Javascript
angular.js指令中的controller、compile与link函数的不同之处
2017/05/10 Javascript
关于javascript获取内联样式与嵌入式样式的实例
2017/06/01 Javascript
详解vue 配合vue-resource调用接口获取数据
2017/06/22 Javascript
利用node.js爬取指定排名网站的JS引用库详解
2017/07/25 Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
2017/12/01 Javascript
详解性能更优越的小程序图片懒加载方式
2018/07/18 Javascript
layui 设置table 行的高度方法
2018/08/17 Javascript
如何为vue的项目添加单元测试
2018/12/19 Javascript
jQuery选择器之基本过滤选择器用法实例分析
2019/02/19 jQuery
对layui初始化列表的CheckBox属性详解
2019/09/13 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
2020/06/26 Javascript
Python随机生成手机号、数字的方法详解
2017/07/21 Python
Python numpy数组转置与轴变换
2019/11/15 Python
Python文件操作方法详解
2020/02/09 Python
加拿大奢华时装品牌:Mackage
2018/01/10 全球购物
Hotels.com香港酒店网:你的自由行酒店订房专家
2018/01/22 全球购物
Bally美国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/18 全球购物
mysql有关权限的表都有哪几个
2015/04/22 面试题
贷款承诺书范文
2014/05/19 职场文书
2014年服务员工作总结
2014/11/18 职场文书
入党心得体会
2019/06/20 职场文书