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


Posted in Javascript onFebruary 14, 2017

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

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上所选节点的所有父节点,如图:

Easyui 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);

结果显示:

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

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

Javascript 相关文章推荐
MSN消息提示类
Sep 05 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
Nov 25 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
Jun 03 Javascript
node.js中的事件处理机制详解
Nov 26 Javascript
详细讲解vue2+vuex+axios
May 27 Javascript
js实现本地时间同步功能
Aug 26 Javascript
js字符串倒序的实例代码
Nov 30 Javascript
Vue页面刷新记住页面状态的实现
Dec 27 Javascript
详解Vue的watch中的immediate与watch是什么意思
Dec 30 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
May 31 Javascript
使用JavaScript实现贪吃蛇游戏
Sep 29 Javascript
vscode+gulp轻松开发小程序的完整步骤
Oct 18 Javascript
Vue组件开发初探
Feb 14 #Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 #Javascript
JavaScript实现定时页面跳转功能示例
Feb 14 #Javascript
javaScript嗅探执行神器-sniffer.js
Feb 14 #Javascript
JS实现的简单图片切换功能示例【测试可用】
Feb 14 #Javascript
Javascript下拉刷新的简单实现
Feb 14 #Javascript
Vue 短信验证码组件开发详解
Feb 14 #Javascript
You might like
提升PHP执行速度全攻略
2006/10/09 PHP
php 定义404页面的实现代码
2012/11/19 PHP
深入PHP5中的魔术方法详解
2013/06/17 PHP
CI框架整合smarty步骤详解
2016/05/19 PHP
jQuery中调用WebService方法小结
2011/03/28 Javascript
Node.js中的缓冲与流模块详细介绍
2015/02/11 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
javascript中使用new与不使用实例化对象的区别
2015/06/22 Javascript
JavaScript中匿名函数的用法及优缺点详解
2016/06/01 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
2017/12/11 Javascript
select2 ajax 设置默认值,初始值的方法
2018/08/09 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
2020/04/26 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
[44:15]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第二局
2016/03/06 DOTA
Python赋值语句后逗号的作用分析
2015/06/08 Python
python 网络爬虫初级实现代码
2016/02/27 Python
python3.5使用tkinter制作记事本
2016/06/20 Python
Python编程之微信推送模板消息功能示例
2017/08/21 Python
pandas Dataframe行列读取的实例
2018/06/08 Python
Python学习小技巧总结
2018/06/10 Python
Python实现连接MySql数据库及增删改查操作详解
2019/04/16 Python
Python数据类型之列表和元组的方法实例详解
2019/07/08 Python
Python3实现个位数字和十位数字对调, 其乘积不变
2020/05/03 Python
CSS3的resize属性使用初探
2015/09/27 HTML / CSS
纯CSS3打造属于自己的“小黄人”
2016/03/14 HTML / CSS
建筑工程管理专业自荐信范文
2013/12/28 职场文书
财务主管自我鉴定
2014/01/17 职场文书
法律七进实施方案
2014/03/15 职场文书
护理专业毕业生自荐信
2014/06/15 职场文书
科技工作者先进事迹
2014/08/16 职场文书
统计员岗位职责
2015/02/11 职场文书
家长高考寄语
2015/02/27 职场文书
Windows11性能真的上涨35%? 桌面酷睿i9实测结果公开
2021/11/21 数码科技
win11怎么用快捷键锁屏? windows11锁屏的几种方法
2021/11/21 数码科技
Redis唯一ID生成器的实现
2022/07/07 Redis
Java Spring读取和存储详细操作
2022/08/05 Java/Android