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 相关文章推荐
EasyUI中的tree用法介绍
Nov 01 Javascript
JS使用for循环遍历Table的所有单元格内容
Aug 21 Javascript
jquery实现弹窗功能(窗口居中显示)
Feb 27 Javascript
Vue2.0 vue-source jsonp 跨域请求
Aug 04 Javascript
原生JS控制多个滚动条同步跟随滚动效果
Dec 22 Javascript
vue自定义指令的创建和使用方法实例分析
Dec 04 Javascript
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
Angular value与ngValue区别详解
Nov 27 Javascript
js滚轮事件 js自定义滚动条的实现
Jan 18 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
Jan 20 Javascript
详解JavaScript 高阶函数
Sep 14 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
Oct 28 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
在数据量大(超过10万)的情况下
2007/01/15 PHP
ioncube_loader_win_5.2.dll的错误解决方法
2015/01/04 PHP
经典PHP加密解密函数Authcode()修复版代码
2015/04/05 PHP
深入理解PHP中mt_rand()随机数的安全
2017/10/12 PHP
PHP实现在对象之外访问其私有属性private及保护属性protected的方法
2017/11/20 PHP
如何在PHP中使用AES加密算法加密数据
2020/06/24 PHP
UserData用法总结 lanyu出品
2010/07/01 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
2015/01/07 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
2016/10/14 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
图片懒加载imgLazyLoading.js使用详解
2020/09/15 Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
2018/08/30 Javascript
vue 路由子组件created和mounted不起作用的解决方法
2019/11/05 Javascript
[11:57]《一刀刀一天》第十七期:TI中国军团加油!
2014/05/26 DOTA
[40:13]Ti4 冒泡赛第二天 iG vs NEWBEE 2
2014/07/15 DOTA
python中使用urllib2获取http请求状态码的代码例子
2014/07/07 Python
python通过字典dict判断指定键值是否存在的方法
2015/03/21 Python
Python实现求解一元二次方程的方法示例
2018/06/20 Python
Django中信号signals的简单使用方法
2019/07/04 Python
python实现二分类的卡方分箱示例
2019/11/22 Python
tensorflow没有output结点,存储成pb文件的例子
2020/01/04 Python
jupyter notebook清除输出方式
2020/04/10 Python
CSS3样式linear-gradient的使用实例
2017/01/16 HTML / CSS
森海塞尔美国官网:Sennheiser耳机与耳麦
2017/07/19 全球购物
Lookfantastic日本官网:英国知名护肤、化妆品和头发护理购物网站
2018/04/21 全球购物
KENZO官网:高田贤三在法国创立的品牌
2019/05/16 全球购物
斯洛伐克香水和化妆品购物网站:Parfemy-Elnino.sk
2020/01/28 全球购物
法律专业实习鉴定
2013/12/22 职场文书
科技之星事迹材料
2014/06/02 职场文书
实验心得体会
2014/09/05 职场文书
2014年药房工作总结
2014/11/22 职场文书
物业前台接待岗位职责
2015/04/03 职场文书
在职证明格式样本
2015/06/15 职场文书
2015年校本培训工作总结
2015/07/24 职场文书
《红领巾真好》教学反思
2016/02/16 职场文书