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 相关文章推荐
学习ExtJS Column布局
Oct 08 Javascript
php,js,css字符串截取的办法集锦
Sep 26 Javascript
JavaScript设计模式之建造者模式介绍
Dec 28 Javascript
解决ueditor jquery javascript 取值问题
Dec 30 Javascript
js获取字符串字节数方法小结
Jun 09 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
Aug 01 Javascript
源码分析Vue.js的监听实现教程
Apr 23 Javascript
详解 vue.js用法和特性
Oct 15 Javascript
JS实现移动端整屏滑动的实例代码
Nov 10 Javascript
vue form check 表单验证的实现代码
Dec 09 Javascript
微信小程序提交form操作示例
Dec 30 Javascript
解析vue、angular深度作用选择器
Sep 11 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
phpwind中的数据库操作类
2007/01/02 PHP
php 攻击方法之谈php+mysql注射语句构造
2009/10/30 PHP
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
php制作动态随机验证码
2015/02/12 PHP
php简单smarty入门程序实例
2015/06/11 PHP
Laravel5.5新特性之友好报错以及展示详解
2017/08/13 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
Laravel定时任务的每秒执行代码
2019/10/22 PHP
图片按比例缩放函数
2006/06/26 Javascript
JScript中使用ADODB.Stream判断文件编码的代码
2008/06/09 Javascript
Jquery easyUI 更新行示例
2014/03/06 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
2015/12/16 Javascript
Javascript动画效果(1)
2016/10/11 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
JavaScript下拉菜单功能实例代码
2017/03/01 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
JavaScript获取某一天所在的星期
2019/09/05 Javascript
python批量生成本地ip地址的方法
2015/03/23 Python
Python通过matplotlib绘制动画简单实例
2017/12/13 Python
解决Python下imread,imwrite不支持中文的问题
2018/12/05 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
python进程的状态、创建及使用方法详解
2019/12/06 Python
200行python代码实现贪吃蛇游戏
2020/04/24 Python
可以随进度显示不同颜色的css3进度条分享
2014/04/11 HTML / CSS
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
意大利在线药房:shop-farmacia.it
2019/03/12 全球购物
幼师岗位求职简历的自荐信格式
2013/09/21 职场文书
房地产销售计划书
2014/01/10 职场文书
论群众路线学习心得体会
2014/10/31 职场文书
群众路线自查报告及整改措施
2014/11/04 职场文书
通知的格式范文
2015/04/27 职场文书
搭讪开场白台词大全
2015/05/28 职场文书
篮球拉拉队口号
2015/12/25 职场文书
导游词之南京夫子庙
2019/12/09 职场文书
你需要掌握的20个Python常用技巧
2022/02/28 Python
python turtle绘图
2022/05/04 Python