脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → easyui tree选中节点

Easyui Tree获取当前选择节点的所有顶级父节点

 更新时间：2017年02月14日 10:42:25   投稿：mrr  
这篇文章主要介绍了Easyui Tree获取当前选择节点的所有顶级父节点,以及easyUI Tree显示选中节点的所有父节点的实现代码，需要的朋友可以参考下

只支持四层目录结构，比较笨的一个方法

JS代码

var node = $('#tree').tree('getSelected'); 
 //获取该节点所有父节点 
           var parentAll = node.text; 
           var flag = ">>"; 
           parentAll = flag.concat(parentAll); 
           var parent = $('#tree').tree('getParent', node.target); 
           if(parent != null && parentOne != ''){ 
              parentAll = (parent.text).concat(parentAll); 
              var parentOne = $('#tree').tree('getParent', parent.target); 
              if(parentOne != null && parentOne != ''){ 
                parentAll = flag.concat(parentAll); 
                parentAll = (parentOne.text).concat(parentAll); 
                var parentTwo = $('#tree').tree('getParent', parentOne.target) 
                if(parentTwo != null && parentTwo != ''){ 
                  parentAll = flag.concat(parentAll); 
                  parentAll = (parentTwo.text).concat(parentAll); 
                } 
              } 
           } 
           $("#path").text(parentAll);

JSP页面代码

<span style="font-size:12px;font-weight:bold;">当前节点:<b id="path"></b></span>

下面看下easyUI Tree显示选中节点的所有父节点

功能需要，显示Tree上所选节点的所有父节点，如图：

这里写图片描述 

代码实现如下：

var str = "";
 var parentAll = "";
 parentAll = node.text;
 parentAll = parentAll.replace(/\[[^\)]*\]/g, ""); //获得所需的节点文本
 var flag = ",";
 var parent = $('#leftTree').tree('getParent', node.target); //获取选中节点的父节点
 for (i = 0; i < 6; i++) { //可以视树的层级合理设置I
   if (parent != null) {
     parentAll = flag.concat(parentAll);
     str = (parent.text).replace(/\[[^\)]*\]/g, "");
     parentAll = (str).concat(parentAll);
     var parent = $('#leftTree').tree('getParent', parent.target);
   }
 }
alert(parentAll);

结果显示：

这里写图片描述

总结：其实原理很简单，就是获取当前选中节点的父节点，然后通过循环，再求父节点的父节点。通过这个功能的实现，也见识到了查看API的好处！

您可能感兴趣的文章:

相关文章

  • 基于JS实现的笛卡尔乘积之商品发布

    基于JS实现的笛卡尔乘积之商品发布

    本文给大家介绍JS实现的笛卡尔乘积之商品发布的相关内容，涉及到js笛卡尔积算法的相关知识，本文介绍的非常详细，具有参考价值，感兴趣的朋友一起学习吧
    2016-05-05
  • 纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示

    纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示

    本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果，代码简单易懂，需要的朋友可以参考下本文
    2015-09-09
  • JS中如何实现Laravel的route函数详解

    JS中如何实现Laravel的route函数详解

    这篇文章主要给大家介绍了JS中是如何实现Laravel的route函数，文中通过示例代码介绍的很详细，相信对大家具有一定的参考价值，有需要的朋友们下面来一起看看吧。
    2017-02-02
  • 前端js操作Cookie超详细介绍与实战案例

    前端js操作Cookie超详细介绍与实战案例

    这篇文章主要给大家介绍了关于前端js操作Cookie详细介绍与案例的相关资料,JS Cookie是一个用于在浏览器中操作Cookie的JavaScript库,它提供了一组简单的方法来设置、获取、删除和检查 Cookie,需要的朋友可以参考下
    2023-09-09
  • javascript防抖函数debounce详解

    javascript防抖函数debounce详解

    这篇文章主要介绍了javascript防抖函数debounce,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下
    2019-06-06
  • 19个很有用的 JavaScript库推荐

    19个很有用的 JavaScript库推荐

    流行的 JavaScript 库有jQuery，MooTools，Prototype，Dojo和YUI等，这些 JavaScript 库功能丰富，加上它们众多的插件，几乎能实现任何你需要的功能
    2011-06-06
  • JavaScript中window.open用法实例详解

    JavaScript中window.open用法实例详解

    这篇文章主要介绍了JavaScript中window.open用法,实例分析了window.open方法的功能、参数及使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-04-04
  • 原生js实现放大镜效果

    原生js实现放大镜效果

    本文主要分享了原生js封装实现放大镜效果的示例代码，具有一定的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • JS实现侧悬浮浮动实例代码

    JS实现侧悬浮浮动实例代码

    这篇文章主要介绍了JS实现侧悬浮浮动实例代码，有需要的朋友可以参考一下
    2013-11-11
  • js自定义QQ菜单效果

    js自定义QQ菜单效果

    这篇文章主要为大家详细介绍了js自定义QQ菜单，具有收缩，下拉等功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-01-01

最新评论