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 相关文章推荐
有关DOM元素与事件的3个谜题
Nov 11 Javascript
javascript转换静态图片,增加粒子动画效果
May 28 Javascript
Jquery中request和request.form和request.querystring的区别
Nov 26 Javascript
AngularJS通过$sce输出html的方法
Sep 22 Javascript
老生常谈的跨域处理
Jan 11 Javascript
Bootstrap DateTime Picker日历控件简单应用
Mar 25 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
基于zepto.js实现手机相册功能
Jul 11 Javascript
Vue.js 中的 v-show 指令及用法详解
Nov 19 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
Mar 08 Javascript
vue 实现根据data中的属性值来设置不同的样式
Aug 04 Javascript
深入理解javascript中的this
Feb 08 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处理postfix邮件内容的方法
2015/06/16 PHP
PHP实现HTTP断点续传的方法
2015/06/17 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
PHP里面把16进制的图片数据显示在html的img标签上(实现方法)
2017/05/02 PHP
PHP实现对xml进行简单的增删改查(CRUD)操作示例
2017/05/19 PHP
PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
2019/05/13 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
2013/06/06 Javascript
Js获取数组最大和最小值示例代码
2013/10/29 Javascript
基于jQuery实现文本框缩放以及上下移动功能
2014/11/24 Javascript
每日十条JavaScript经验技巧(一)
2016/06/23 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
2016/08/05 Javascript
jQuery实现别踩白块儿网页版小游戏
2017/01/18 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
2017/01/21 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
2018/05/11 Javascript
详解在Node.js中发起HTTP请求的5种方法
2019/01/10 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
2019/05/12 Javascript
js设置默认时间跨度过程详解
2019/07/17 Javascript
javascript 原型与原型链的理解及实例分析
2019/11/23 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
2020/03/03 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
2020/04/29 Javascript
Vue解决echart在element的tab切换时显示不正确问题
2020/08/03 Javascript
Element el-button 按钮组件的使用详解
2021/02/01 Javascript
在Python程序员面试中被问的最多的10道题
2017/12/05 Python
python生成n个元素的全组合方法
2018/11/13 Python
Python编程中flask的简介与简单使用
2018/12/28 Python
Python实现定时自动关闭的tkinter窗口方法
2019/02/16 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
FitFlop美国官网:英国符合人体工学的鞋类品牌
2018/10/05 全球购物
大学军训感言1000字
2014/02/25 职场文书
人力资源管理系自荐信
2014/05/31 职场文书
公证委托书标准格式
2014/09/11 职场文书
税务干部群众路线教育实践活动自我剖析材料
2014/09/21 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
小学教师师德师风自我评价
2015/03/04 职场文书
导游词之贵州百里杜鹃
2019/10/29 职场文书