easyui中combotree循环获取父节点至根节点并输出路径实现方法


Posted in Javascript onNovember 10, 2016

前台页面:

<pre name="code" class="html"><td style="height: 35px" colspan="7"> 
   <input id="fm_AEType" class="easyui-combotree" style="width: 240px" /> 
   <label id="fm_AETypePath" /> 
</td></pre>

 JavaScript页面(包括数据初始化):

initAEType: function () { 
  $.ajax({ 
    url: AEActionUrl + '?action=listaetype&ParentType=', 
    dataType: 'json', 
    success: function (jsonstr) { 
      $('#fm_AEType').combotree({ 
        data: jsonstr, 
        editable: false, 
        //lines: true, 
        valueField: 'AE_TYPE_ID', 
        textField: 'AE_TYPE_NAME', 
        onLoadSuccess: function () { 
          $('#fm_AEType').combotree('tree').tree("collapseAll"); 
        }, 
        onSelect: function (item) { 
          var parent = item; 
          var tree = $('#fm_AEType').combotree('tree'); 
          var path = new Array(); 
          do { 
            path.unshift(parent.text); 
            var parent = tree.tree('getParent', parent.target); 
          } while (parent); 
          var pathStr = ''; 
          for (var i = 0; i < path.length; i++) { 
            pathStr += path[i]; 
            if (i < path.length - 1) { 
              pathStr += ' - '; 
            } 
          } 
          $('#fm_AETypePath').text(pathStr); 
        } 
      }); 
    } 
  }); 
}

如上,关键代码在onSelect事件中。

以上就是小编为大家带来的easyui中combotree循环获取父节点至根节点并输出路径实现方法全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
Jun 27 Javascript
Javascript this 的一些学习总结
Aug 31 Javascript
jQuery实现视频作为全屏幕背景
Dec 18 Javascript
仿JQuery输写高效JSLite代码的一些技巧
Jan 13 Javascript
jQuery实现的输入框选择时间插件用法实例
Feb 28 Javascript
jquery 遍历数组 each 方法详解
May 25 Javascript
JQuery遍历元素的父辈和祖先的方法
Sep 18 Javascript
jQuery生成假加载动画效果
Dec 01 Javascript
vue router2.0二级路由的简单使用
Jul 05 Javascript
原生js实现Flappy Bird小游戏
Dec 24 Javascript
详解vue-flickity的fullScreen功能实现
Apr 07 Javascript
javascript进阶篇深拷贝实现的四种方式
Jul 07 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
Nov 09 #Javascript
通过bootstrap全面学习less
Nov 09 #Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
Nov 09 #Javascript
jquery插件bootstrapValidator数据验证详解
Nov 09 #Javascript
jQuery之动画效果大全
Nov 09 #Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
Nov 09 #Javascript
jQuery Ztree行政地区树状展示(点击加载)
Nov 09 #Javascript
You might like
收音机的保养
2021/03/01 无线电
实时抓取YAHOO股票报价的代码
2006/10/09 PHP
php递归删除目录与文件的方法
2015/01/30 PHP
PHP SPL标准库之SplFixedArray使用实例
2015/05/12 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
很可爱的输入框
2008/08/03 Javascript
Javascript条件判断使用小技巧总结
2008/09/08 Javascript
JQuery将文本转化成JSON对象需要注意的问题
2011/05/09 Javascript
JS仿flash上传头像效果实现代码
2011/07/18 Javascript
javascript中的void运算符语法及使用介绍
2013/03/10 Javascript
JavaScript获取指定元素位置的方法
2015/04/08 Javascript
jQuery+ajax+asp.net获取Json值的方法
2016/06/08 Javascript
EasyUI Pagination 分页的两种做法小结
2016/07/09 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
2016/10/27 Javascript
原生JS简单实现ajax的方法示例
2016/11/29 Javascript
Vue生命周期示例详解
2017/04/12 Javascript
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
javascript实现数字配对游戏的实例讲解
2017/12/14 Javascript
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
JavaScript Event Loop相关原理解析
2020/06/10 Javascript
Python实现的连接mssql数据库操作示例
2018/08/17 Python
解决pycharm回车之后不能换行或不能缩进的问题
2019/01/16 Python
详解Python网络框架Django和Scrapy安装指南
2019/04/01 Python
Python中利用LSTM模型进行时间序列预测分析的实现
2019/07/26 Python
python解释器spython使用及原理解析
2019/08/24 Python
python实现最大优先队列
2019/08/29 Python
css3 中translate和transition的使用方法
2020/03/26 HTML / CSS
C++面试题:关于链表和指针
2013/06/05 面试题
文秘档案管理岗位职责
2014/03/06 职场文书
我们的节日清明节活动总结
2014/04/30 职场文书
政府信息公开实施方案
2014/05/09 职场文书
夏洛特的网观后感
2015/06/15 职场文书
九年级历史教学反思
2016/02/19 职场文书
使用RedisTemplat实现简单的分布式锁
2021/11/20 Redis
python使用BeautifulSoup 解析HTML
2022/04/24 Python