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.validate 常用方法及需要注意的问题
Mar 20 Javascript
js实现点击文本框显示日期选择器特效代码分享
May 21 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
Nov 26 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
Dec 17 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
Jan 21 Javascript
学习使用jQuery表单验证插件和日历插件
Feb 13 Javascript
Angular.js自定义指令学习笔记实例
Feb 24 Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 Javascript
在 Angular中 使用 Lodash 的方法
Feb 11 Javascript
关于Vue项目跨平台运行问题的解决方法
Sep 18 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
Apr 07 Javascript
Vue实现简单购物车功能
Dec 13 Vue.js
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 什么是PEAR?(第二篇)
2009/03/19 PHP
用PHP的超级变量$_POST获取HTML表单(HTML Form) 数据
2011/05/07 PHP
PHP常用工具类大全附全部代码下载
2015/12/07 PHP
PHP getallheaders无法获取自定义头(headers)的问题
2016/03/23 PHP
PHPStorm2020.1永久激活及下载更新至2020(推荐)
2020/09/25 PHP
!DOCTYPE声明对JavaScript的影响分析
2010/04/12 Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
2011/05/10 Javascript
js与运算符和或运算符的妙用
2014/02/14 Javascript
jquery实现的鼠标下拉滚动置顶效果
2014/07/24 Javascript
js遍历子节点子元素附属性及方法
2014/08/19 Javascript
JavaScript类型系统之Object详解
2016/01/07 Javascript
js滚动条平滑移动示例代码
2016/03/29 Javascript
jQuery使用cookie与json简单实现购物车功能
2016/04/15 Javascript
javascript 利用arguments实现可变长参数
2016/11/21 Javascript
整理关于Bootstrap导航的慕课笔记
2017/03/29 Javascript
Vue刷新修改页面中数据的方法
2018/09/16 Javascript
微信小程序实现星星评价效果
2018/11/02 Javascript
详解使用React制作一个模态框
2019/03/14 Javascript
vue element upload实现图片本地预览
2019/08/20 Javascript
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
Vue export import 导入导出的多种方式与区别介绍
2020/02/12 Javascript
javascript异常处理实现原理详解
2020/02/17 Javascript
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
Python中time模块和datetime模块的用法示例
2016/02/28 Python
Python爬取三国演义的实现方法
2016/09/12 Python
python实现梯度下降算法
2020/03/24 Python
python开发之anaconda以及win7下安装gensim的方法
2019/07/05 Python
python数据处理——对pandas进行数据变频或插值实例
2020/04/22 Python
python可迭代对象去重实例
2020/05/15 Python
pandas抽取行列数据的几种方法
2020/12/13 Python
利用CSS3实现圆角的outline效果的教程
2015/06/05 HTML / CSS
高二美术教学反思
2014/01/14 职场文书
乡镇干部党的群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
行政司机岗位职责
2015/04/10 职场文书
uniapp开发小程序的经验总结
2021/04/08 Javascript
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python