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 TO HTML 转换
Jun 26 Javascript
Javascript 按位取反运算符 (~)
Feb 04 Javascript
javascript实现限制上传文件大小
Feb 06 Javascript
JS+CSS实现Li列表隔行换色效果的方法
Feb 16 Javascript
vue制作加载更多功能的正确打开方式
Oct 12 Javascript
关于vue.js v-bind 的一些理解和思考
Jun 06 Javascript
vue-cli3 从搭建到优化的详细步骤
Jan 20 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
Mar 29 Javascript
微信小程序仿今日头条导航栏滚动解析
Aug 20 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
Nov 09 Javascript
在Vue中使用Echarts实例图的方法实例
Oct 10 Javascript
vue3.0 自适应不同分辨率电脑的操作
Feb 06 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
雄兵连三大错觉:凯莎没了,凉冰阵亡了,华烨觉得自己又行了
2020/04/09 国漫
用PHP开发GUI
2006/10/09 PHP
php smarty模版引擎中变量操作符及使用方法
2009/12/11 PHP
PHP数组操作类实例
2015/07/11 PHP
PHP正则匹配操作简单示例【preg_match_all应用】
2017/07/10 PHP
如何修改Laravel中url()函数生成URL的根地址
2017/08/11 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
jquery 元素控制(追加元素/追加内容)介绍及应用
2013/04/21 Javascript
js string 转 int 注意的问题小结
2013/08/15 Javascript
jsPDF导出pdf示例
2014/05/02 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
2015/03/01 Javascript
jQuery实用技巧必备(上)
2015/11/02 Javascript
jquery动画效果学习笔记(8种效果)
2015/11/13 Javascript
Jquery插件easyUi实现表单验证示例
2015/12/15 Javascript
BootStrap中Table分页插件使用详解
2016/10/09 Javascript
ReactJs快速入门教程(精华版)
2016/11/28 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
2016/12/21 Javascript
create-react-app修改为多页面支持的方法
2018/05/17 Javascript
js中时间格式化的几种方法
2018/07/22 Javascript
Vue配合iView实现省市二级联动的示例代码
2018/07/27 Javascript
解决vue-cli 打包后自定义动画未执行的问题
2019/11/12 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
2020/09/04 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
2020/12/30 Vue.js
jquery实现穿梭框功能
2021/01/19 jQuery
Python实现的Google IP 可用性检测脚本
2015/04/23 Python
Python抽象类的新写法
2015/06/18 Python
获取Django项目的全部url方法详解
2017/10/26 Python
Python反转序列的方法实例分析
2018/03/21 Python
Python面向对象基础入门之设置对象属性
2018/12/11 Python
Python通过TensorFlow卷积神经网络实现猫狗识别
2019/03/14 Python
python 统计list中各个元素出现的次数的几种方法
2021/02/20 Python
节水标语大全
2014/06/11 职场文书
财务管理制度范本
2015/08/04 职场文书
2016暑期校本培训心得体会
2016/01/08 职场文书
vue项目配置sass及引入外部scss文件
2022/04/14 Vue.js
浅谈为什么我的 z-index 又不生效了
2022/07/15 HTML / CSS