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 相关文章推荐
读jQuery之七 判断点击了鼠标哪个键的代码
Jun 21 Javascript
jQuery之ajax技术的详细介绍
Jun 19 Javascript
Javascript合并表格中具有相同内容单元格示例
Aug 11 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
Jun 13 Javascript
Underscore.js 1.3.3 中文注释翻译说明
Jun 25 Javascript
在vue项目中引入highcharts图表的方法(详解)
Mar 05 Javascript
使用Vue动态生成form表单的实例代码
Apr 26 Javascript
10个最受欢迎的 JavaScript框架(推荐)
Apr 24 Javascript
JS实现处理时间,年月日,星期的公共方法示例
May 31 Javascript
微信小程序 wx:for遍历循环使用实例解析
Sep 09 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 Javascript
Javascript节流函数throttle和防抖函数debounce
Dec 03 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
全国FM电台频率大全 - 4 山西省
2020/03/11 无线电
三种php连接access数据库方法
2013/11/11 PHP
php实例分享之通过递归实现删除目录下的所有文件详解
2014/05/15 PHP
php中数字0和空值的区别分析
2014/06/05 PHP
对PHP PDO的一些认识小结
2015/01/23 PHP
解决ThinkPHP下使用上传插件Uploadify浏览器firefox报302错误的方法
2015/12/18 PHP
Zend Framework前端控制器用法示例
2016/12/11 PHP
php post换行的方法
2020/02/03 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
firefox中用javascript实现鼠标位置的定位
2007/06/17 Javascript
google地图的路线实现代码
2009/08/20 Javascript
JavaScript编写推箱子游戏
2015/07/07 Javascript
JS+CSS实现滑动切换tab菜单效果
2015/08/25 Javascript
JQuery手速测试小游戏实现思路详解
2016/09/20 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
vue toggle做一个点击切换class(实例讲解)
2018/03/13 Javascript
AngularJS下$http服务Post方法传递json参数的实例
2018/03/29 Javascript
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
python 文件和路径操作函数小结
2009/11/23 Python
Linux环境下MySQL-python安装过程分享
2015/02/02 Python
Python编写生成验证码的脚本的教程
2015/05/04 Python
Python程序员面试题 你必须提前准备!(答案及解析)
2018/01/23 Python
python获取代理IP的实例分享
2018/05/07 Python
对numpy数据写入文件的方法讲解
2018/07/09 Python
Python 读写文件的操作代码
2018/09/20 Python
Python获取网段内ping通IP的方法
2019/01/31 Python
python飞机大战pygame碰撞检测实现方法分析
2019/12/17 Python
最新2019Pycharm安装教程 亲测
2020/02/28 Python
解决启动django,浏览器显示“服务器拒绝访问”的问题
2020/05/13 Python
keras自定义回调函数查看训练的loss和accuracy方式
2020/05/23 Python
Python趣味入门教程之循环语句while
2020/08/26 Python
正规的求职信范文分享
2013/12/11 职场文书
家庭教育的心得体会
2014/09/01 职场文书
教师学习群众路线心得体会
2014/11/04 职场文书
春秋淹城导游词
2015/02/11 职场文书
聚会通知怎么写
2015/04/23 职场文书