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 相关文章推荐
javascript hashtable 修正版 下载
Dec 30 Javascript
js模拟select下拉菜单控件的代码
May 08 Javascript
js加密解密字符串可自定义密码因子
May 13 Javascript
最原始的jQuery注册验证方式
Oct 11 Javascript
jQuery实现简易的输入框字数计数功能示例
Jan 16 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
Feb 19 Javascript
基于axios封装fetch方法及调用实例
Feb 05 Javascript
Vue项目全局配置微信分享思路详解
May 04 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
Jun 14 Javascript
vue.js 中使用(...)运算符报错的解决方法
Aug 09 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
Sep 13 Javascript
js实现可爱的气泡特效
Sep 05 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
解析posix与perl标准的正则表达式区别
2013/06/17 PHP
php随机显示图片的简单示例
2014/02/15 PHP
php实现httpclient类示例
2014/04/08 PHP
wamp服务器访问php非常缓慢的解决过程
2015/07/01 PHP
浅谈php中的循环while、do...while、for、foreach四种循环
2016/11/05 PHP
PHP7 安装event扩展的实现方法
2019/10/08 PHP
js实现简单登录功能的实例代码
2013/11/09 Javascript
Angular2 环境配置详细介绍
2016/09/21 Javascript
Node.JS利用PhantomJs抓取网页入门教程
2017/05/19 Javascript
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
js的新生代垃圾回收知识点总结
2019/08/22 Javascript
vue获取data数据改变前后的值方法
2019/11/07 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
详解vue中v-model和v-bind绑定数据的异同
2020/08/10 Javascript
PyTorch学习笔记之回归实战
2018/05/28 Python
Python面向对象进阶学习
2019/05/21 Python
如何安装并使用conda指令管理python环境
2019/07/10 Python
python之拟合的实现
2019/07/19 Python
python requests指定出口ip的例子
2019/07/25 Python
Python Django搭建网站流程图解
2020/06/13 Python
css3和jquery实现自定义checkbox和radiobox组件
2014/04/22 HTML / CSS
Eagle Eyes Optics鹰眼光学:高性能太阳镜
2018/12/07 全球购物
八皇后问题,输出了所有情况,不过有些结果只是旋转了90度
2016/08/15 面试题
升职自荐信范文
2013/10/05 职场文书
历史系毕业生自荐信
2013/10/28 职场文书
传媒专业推荐信范文
2013/11/23 职场文书
校长先进事迹材料
2014/02/01 职场文书
审计专业自荐信范文
2014/04/21 职场文书
企业文明单位申报材料
2014/05/16 职场文书
大学生学习计划书
2014/09/15 职场文书
2014年医德医风工作总结
2014/11/13 职场文书
2015年安全教育月活动总结
2015/03/26 职场文书
廉政承诺书范文
2015/04/28 职场文书
青年岗位能手事迹材料(2016推荐版)
2016/03/01 职场文书
原生CSS实现文字无限轮播的通用方法
2021/03/30 HTML / CSS
详解Python+OpenCV进行基础的图像操作
2022/02/15 Python