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如何解决的更多相关文章

  1. ztree获取选中节点

    $(document).ready(function(){ $.fn.zTree.init($("#treeDemo"), setting, zNodes); }); functi ...

  2. ztree 获取CheckBox选中节点时,不获取选中上级父节点

    //将第三个参数改为false,表示不去勾选父节点下的所有子节点 zTreeObj.checkNode(node, true, false); setting.check.chkboxType = { ...

  3. ztree 获取子节点所有父节点的name的拼接

    ztree 获取子节点所有父节点的name的拼接 //获取子节点,所有父节点的name的拼接字符串function getFilePath(treeObj){if(treeObj==null)retu ...

  4. jsTree获取选中节点和选中指定节点

    jstree获取当前选中的checkbox和获取选中节点的所有节点 首先初始化一个带有复选框的 jstree $('#demo_tree').jstree({ "core" : { ...

  5. jQuery中获取文档的高度、可视区域高度以及滚动条距页面顶部的高度

    在写页面的时候,经常会碰到这样的情况,就是要获取文档的高度.可视区域高度或者滚动条距页面顶部的高度等情况. 但我总是有些爱搞混淆了,这里还是简单做个笔记吧,这里只限于使用jQuery来获取. 1.获取 ...

  6. jstree 获取选中节点的所有子子点

    //加载功能树 function initTree() { $.jstree.destroy(); $.ajax({ type: "Get", url: "/Depart ...

  7. zTree设置选中节点之后出现重复节点

    1.用户离开页面时最后一次点击的节点信息我会保存到数据库. 2.用户打开页面时默认选中上一次离开时选中的节点. 现在发现在设置选中节点之后,会出现重复的节点(重复现象偶尔出现). 以下是代码: var ...

  8. ztree 获取根节点

    function getRoot() { var treeObj = $.fn.zTree.getZTreeObj("tree-div"); //返回一个根节点 var node ...

  9. zTree获取当前节点的下一级子节点数

    使用zTree插件实现树形图中,需要获取当前点击的父节点的子节点数的需求,使用treeNode.children获取子节点数据集合,使用length方法获取集合长度.将当前节点的treeNode传入即 ...

随机推荐

  1. java反射-获取方法信息

    例子代码如下: package com.reflect; import java.lang.reflect.Method; public class ClassUtill { /* * 打印类的信息, ...

  2. Cookie的介绍

    Cookie是某些站点为了辨别用户身份而存在用户本地终端上的数据.Cookie总是保存在client中,可分为内存 Cookie和硬盘Cookie,而依照时间划分.又能够分为非持久Cookie和持久C ...

  3. 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 ...

  4. Windows2008 R2下,应用程序池 'XXXXXXXX' 被自动禁用,原因是为此应用程序池提供服务的进程中出现一系列错误。

    转:http://www.cnblogs.com/freeton/archive/2012/08/28/2660585.html http://www.hack001.com/post/151

  5. C#中各种集合类比较

    数组(Array)的不足(即:集合与数组的区别) 1. 数组是固定大小的,不能伸缩.虽然System.Array.Resize这个泛型方法可以重置数组大小,但是该方法是重新创建新设置大小的数组,用的是 ...

  6. (Spring Boot框架)快速入门

    Spring Boot 系列文章推荐 Spring Boot 入门 Spring Boot 属性配置和使用 Spring Boot 集成MyBatis Spring Boot 静态资源处理 今天介绍一 ...

  7. 用注册表更改DNS的代码分享

    用注册表更改DNS,1秒切换完毕,快速又方便,不用麻烦的去等待了,支持远程路劲运行 最进我这里DNS老是间歇性掉,很不稳定,广州地区,如果你的DNS经常需要更换,试试这个批处理, 论坛很多人发过了更改 ...

  8. atitit.激活一个窗口总结 swing java .net php

    atitit.激活一个窗口总结 1     激活窗口:鼠标激活vswindows消息激活 1.1      Web框架激活 2     退出激活窗口热键(dbg模式) 3     俩个窗口激活优先级 ...

  9. po vo

    一.PO:persistant object 持久对象,可以看成是与数据库中的表相映射的java对象.使用Hibernate来生成PO是不错的选择. 二.VO:value object值对象.通常用于 ...

  10. Linux 进程资源用量监控和按用户设置进程限制

    每个 Linux 系统管理员都应该知道如何验证硬件.资源和主要进程的完整性和可用性.另外,基于每个用户设置资源限制也是其中一项必备技能. 在这篇文章中,我们会介绍一些能够确保系统硬件和软件正常工作的方 ...