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弹出层始终垂直居中相对于屏幕或当前窗口
Apr 01 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
Sep 09 Javascript
js判断两个日期是否相等的方法
Sep 10 Javascript
jQuery统计上传文件大小的方法
Jan 24 Javascript
AngularJS数据源的多种获取方式汇总
Feb 02 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
May 28 Javascript
jquery uploadify如何取消已上传成功文件
Feb 08 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
Jan 07 Javascript
vue路由跳转传参数的方法
May 06 Javascript
优化Vue项目编译文件大小的方法步骤
May 27 Javascript
关于vue-cli3打包代码后白屏的解决方案
Sep 02 Javascript
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
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
ADODB结合SMARTY使用~超级强
2006/11/25 PHP
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
php xml 入门学习资料
2011/01/01 PHP
微信支付开发交易通知实例
2016/07/12 PHP
PHP7 其他语言层面的修改
2021/03/09 PHP
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
2013/07/02 Javascript
button没写type=button会导致点击时提交
2014/03/06 Javascript
jQuery选择器querySelector的使用指南
2015/01/23 Javascript
分享一个自己写的简单的javascript分页组件
2015/02/15 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
2017/01/24 Javascript
微信小程序和百度的语音识别接口详解
2019/05/06 Javascript
如何在vue-cli中使用css-loader实现css module
2021/01/07 Vue.js
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
python自动安装pip
2014/04/24 Python
python实现简单温度转换的方法
2015/03/13 Python
从Python程序中访问Java类的简单示例
2015/04/20 Python
用C++封装MySQL的API的教程
2015/05/06 Python
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
Python利用itchat对微信中好友数据实现简单分析的方法
2017/11/21 Python
Python多进程并发与多线程并发编程实例总结
2018/02/08 Python
Python根据已知邻接矩阵绘制无向图操作示例
2018/06/23 Python
基于python实现KNN分类算法
2020/04/23 Python
python pip安装包出现:Failed building wheel for xxx错误的解决
2019/12/25 Python
Python小整数对象池和字符串intern实例解析
2020/03/21 Python
python pandas.DataFrame.loc函数使用详解
2020/03/26 Python
Django框架实现在线考试系统的示例代码
2020/11/30 Python
python基于pexpect库自动获取日志信息
2021/02/01 Python
CSS3中的Transition过度与Animation动画属性使用要点
2016/05/20 HTML / CSS
酒店中秋节活动方案
2014/01/31 职场文书
应届毕业生如何写求职信
2014/02/16 职场文书
经营目标管理责任书
2014/07/25 职场文书
小学生美德少年事迹材料
2014/08/24 职场文书
地道战观后感
2015/06/04 职场文书
幼儿园卫生保健制度
2015/08/05 职场文书