Easyui Tree获取当前选择节点的所有顶级父节点

2024-12-19 13:09:19

只支持四层目录结构，比较笨的一个方法

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上所选节点的所有父节点，如图：

代码实现如下：

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);

结果显示：

总结：其实原理很简单，就是获取当前选中节点的父节点，然后通过循环，再求父节点的父节点。通过这个功能的实现，也见识到了查看API的好处！

EasyUI 中combotree 默认不能选择父节点的实现方法

这需要添加如下字段就行,搜了半天,说什么判断是不是子节点什么的,都是胡扯! onlyLeafCheck:true, //病因分类 $('#artReason').combotree({ width:200, method:'GET', //url: '${ctx}/business/dict/json/DicEtilolgy', data:DicEtilolgy_data, idField : 'id', textFiled : 'name', parentField : 'pid', anim
easyui中combotree循环获取父节点至根节点并输出路径实现方法

前台页面: <pre name="code" class="html"><td style="height: 35px" colspan="7"> <input id="fm_AEType" class="easyui-combotree" style="width: 240px" /> <label id="fm_
EasyUi combotree 实现动态加载树节点

推荐阅读: 简介EasyUI datagrid editor combogrid搜索框的实现 EasyUi中的Combogrid 实现分页和动态搜索远程数据 easyui 1.2.4例子中并没有给出动态加载树节点的例子,只好自己研究. 从源码中可知可以看出combotree 是继承 combo 和 tree两个控件,所以在展开其下级子节点时,把combotree内置的tree的options选项的url重置成一个动态取选择值的url,代码如下: $('#cc').combotree({ url:
浅谈EasyUi ComBotree树修改父节点选择的问题

本人在使用 Easy UI 期间发现了一个不太适合项目的bug,可能也不算bug把 . 毕竟不同项目背景取舍不同. 我在做网元树选择的时候发现当选取父节点后,子节点都会被选择返回 .但是如果我们选中父节点后没有必要选择子节点. 故对源脚本作适当修改下拉框树修改父节点选中后只显示父节点取消返回子节点修改方法找到树的选择函数进行遍历判断查找关键字 combotree multiple 大约行数 10564 function _7d5(_7d6) { var opts=$
浅谈EasyUI中Treegrid节点的删除

EasyUI中的删除很简单,一般直接复制粘贴就行. 下面是对树节点的删除. 复制代码代码如下: // 删除 function removes() { var rows = ruletreegrid.treegrid('getSelections'); if (rows && rows.length == 1) { var showmsg = ""; if (rows[0].pid == 0) {
扩展jquery easyui tree的搜索树节点方法(推荐)

如下所示: /** * 1)扩展jquery easyui tree的节点检索方法.使用方法如下: * $("#treeId").tree("search", searchText); * 其中,treeId为easyui tree的根UL元素的ID,searchText为检索的文本. * 如果searchText为空或"",将恢复展示所有节点为正常状态 */ (function($) { $.extend($.fn.tree.methods,
Easyui Tree获取当前选择节点的所有顶级父节点

只支持四层目录结构,比较笨的一个方法 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 &
element-ui中实现tree子节点部分选中时父节点也选中

目录子节点部分选中时父节点也选中 el-tree数据回显时子节点部分选中,父节点都全选中的坑我这里用getNode()的方法来简单解决子节点部分选中时父节点也选中如果需求是:选中任何一个子节点都默认选择父节点,怎么办? 其实,element-ui也提供了方案,常规下,如果子节点选中,那么这时父节点是半选中状态,在获取选中值时,只需要利用**getHalfCheckedKeys()+getCheckedKeys()**两个方法即可达到效果. let zi = this.$refs.tre
bootstrap插件treeview实现全选父节点下所有子节点和反选功能

项目需要实现权限管理,使用前端框架bootstrap,所以就直接选用了bootstrap的treeview扩展插件.先上图: 选中父节点时,父节点下所有子节点也都全部选中,看代码 1.HTML代码 <h2>TreeView Checkable</h2> <div id="treeview-checkable"></div> 2.Json数据 function getTvStateData() { var defaultData = [ {
javascript下查找父节点的简单方法

<div> <a href="#">标题</a> <ul id="demo"> <li><a href="#" onclick="selectThisItem(this)">项目一</a></li> <ul>
js查找父节点的简单方法

<div> <a href="#">标题</a> <ul id="demo"> <li><a href="#" onclick="selectThisItem(this)">项目一</a></li> <ul>
javascript中节点的最近的相关节点访问方法

在javascript中对文档中每个节点都有 parentNode--父节点 firstChild--第一个子节点 lastChild--最后一个子节点 previousSibling--紧挨着的前面的兄弟节点 nextSibling--紧挨着的后面的兄弟节点五个相关的节点,这些节点可以不存在,为null.例如document就不包含父节点,文本节点(TextNode)就不包含子节点. 这样就可以作短途旅行,访问当前节点的某些相关节点. 另外还有childNode[](包含所有的子节点)和ch

Easyui Tree获取当前选择节点的所有顶级父节点

相关推荐

随机推荐