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 THICKBOX弹出层插件
Aug 30 Javascript
javascript 遍历验证所有文本框的值
Aug 27 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
Feb 27 Javascript
javascript关于继承的用法汇总
Dec 20 Javascript
jQuery实现二级下拉菜单效果
Jan 05 Javascript
关于cookie的初识和运用(js和jq)
Apr 07 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
Aug 01 Javascript
js绘制购物车抛物线动画
Nov 18 Javascript
Vue.JS入门教程之事件监听
Dec 01 Javascript
angularjs+bootstrap实现自定义分页的实例代码
Jun 19 Javascript
vue 如何使用递归组件
Oct 23 Javascript
微前端qiankun改造日渐庞大的项目教程
Jun 21 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中关于codeigniter的xmlrpc的类在进行数据交换时的类型问题
2011/07/03 PHP
PHP动态分页函数,PHP开发分页必备啦
2011/11/07 PHP
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
PHP使用mysql与mysqli连接Mysql数据库用法示例
2016/07/07 PHP
php如何实现不借助IDE快速定位行数或者方法定义的文件和位置
2017/01/17 PHP
PHP实现的数组和XML文件相互转换功能示例
2018/03/15 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
jQuery1.6 使用方法一
2011/11/23 Javascript
node.js中使用q.js实现api的promise化
2014/09/17 Javascript
JavaScript截断字符串的方法
2015/07/15 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
JavaScript实现大图轮播效果
2017/01/11 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
2017/04/10 Javascript
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
在vue项目中引入highcharts图表的方法(详解)
2018/03/05 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
JS二级菜单不同实现方法分析【4种方法】
2018/12/21 Javascript
判断js数据类型的函数实例详解
2019/05/23 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
2019/09/23 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
2019/09/25 Javascript
[01:34]传奇从这开始 2016国际邀请赛中国区预选赛震撼开启
2016/06/26 DOTA
Python基于QRCode实现生成二维码的方法【下载,安装,调用等】
2017/07/11 Python
Python使用Selenium模块模拟浏览器抓取斗鱼直播间信息示例
2018/07/18 Python
Python 导入文件过程图解
2019/10/15 Python
Python中Pyspider爬虫框架的基本使用详解
2021/01/27 Python
美国女孩洋娃娃店:American Girl
2017/10/24 全球购物
英国领先的家庭时尚品牌:Peacocks
2018/01/11 全球购物
美国轻奢时尚购物网站:REVOLVE(支持中文)
2020/07/18 全球购物
社区志愿者心得体会
2014/01/03 职场文书
停课通知书
2015/04/24 职场文书
初中数学课堂教学反思
2016/02/17 职场文书
python神经网络编程之手写数字识别
2021/05/08 Python
python基于机器学习预测股票交易信号
2021/05/25 Python
OpenCV-Python实现人脸美白算法的实例
2021/06/11 Python
Go Plugins插件的实现方式
2021/08/07 Golang
SQLyog的下载、安装、破解、配置教程(MySQL可视化工具安装)
2022/09/23 MySQL