zoukankan      html  css  js  c++  java
  • Ztree插件,定位节点时(focus)不能进入可视区域BUG解决方案

    相关插件版本:

    jquery.ztree.exedit-3.4.js

    jquery.ztree.all-3.4.js

    jquery-1.8.0.js

     1     function onAsyncSuccess(event, treeId, treeNode, msg) {
     2         curAsyncCount--;
     3         if (curStatus == "expand") {
     4             expandNodes(treeNode.children);
     5         } else if (curStatus == "async") {
     6             asyncNodes(treeNode.children);
     7         } 
     8         if (curAsyncCount <= 0) {
     9             curStatus = "";
    10             // 节点定位
    11             if(devicesSelect.selectNodeId){
    12                 // 节点变成被选中状态
    13                 var zTree = $.fn.zTree.getZTreeObj(zTreeId);
    14                 zTree.cancelSelectedNode();
    15                 $("#" + devicesSelect.selectNodeId + "_a").addClass("curSelectedNode");
    16                 $("#treeDiv1").animate({scrollTop:$("#"+devicesSelect.selectNodeId).offset().top-300},1000);//1000是ms,也可以用slow代替
    17                 devicesSelect.selectNodeId = "";
    18             }
    19         }
    20     }
     1     function expandNodes(nodes) {
     2         if (!nodes) return;
     3         curStatus = "expand";
     4         var zTree = $.fn.zTree.getZTreeObj(zTreeId);
     5         for (var i=0, l=nodes.length; i<l; i++) {
     6             if(ids.indexOf(nodes[i].id) != -1){
     7                 if (nodes[i].isParent&&(ids.substring(0,ids.indexOf(","))!=nodes[i].id)) {
     8                     if(nodes[i].typeName.indexOf("虚拟")=="-1"){
     9                         zTree.expandNode(nodes[i], true, false, false);
    10                     } else if(nodes[i].type.indexOf(type)>"-1"){
    11                         zTree.expandNode(nodes[i], true, false, false);
    12                     }
    13                 } else {
    14                     goAsync = true;
    15                 }
    16             }
    17         }
    18         if(goAsync==true){
    19             var id_ = ids.substring(0,ids.indexOf(","));
    20             var node = zTree.getNodeByParam("id",id_);
    21             goAsync = false;
    22             me.curStatus = "";
    23             me.type = "";
    24             me.selectNodeId = node.tId;
    25         }
    26     }

    定位思路:
    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);】这种方式的,虽然有效,但是同层节点过多时候,还是不能进入可视区域,我深深的怀疑是因为这个时候树还没展开,所以我就用了动画,无赖之举。

    笔者最后的话:如果本文有任何错误,敬请看官火辣指出,不胜感激涕零。。。。

  • 相关阅读:
    晕倒的AIX
    MySQL Replication(zt)
    pxe启动网络安装CentOS(win平台)(zt)
    几句比较实用的script
    改注册表方式防DDOS攻击[ZT]
    一个免费空间列表相对集中的地方
    CREE LED的一个小资料
    下一步准备研究的东西:rsync远程同步
    PXE启动安装Linux (zt)
    系统调用
  • 原文地址:https://www.cnblogs.com/jkgyu/p/5013843.html
Copyright © 2011-2022 走看看