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 相关文章推荐
基于jquery的下拉框改变动态添加和删除表格实现代码
Sep 12 Javascript
node.js中的fs.linkSync方法使用说明
Dec 15 Javascript
js实现将选中内容分享到新浪或腾讯微博
Dec 16 Javascript
js创建对象的方法汇总
Jan 07 Javascript
jQuery 跨域访问解决原理案例详解
Jul 09 Javascript
JS 对java返回的json格式的数据处理方法
Dec 05 Javascript
JS正则表达式验证密码格式的集中情况总结
Feb 23 Javascript
vue-cli的webpack模板项目配置文件分析
Apr 01 Javascript
微信小程序之圆形进度条实现思路
Feb 22 Javascript
JS实现导航栏楼层特效
Jan 01 Javascript
安装多版本Vue-CLI的实现方法
Mar 24 Javascript
Vue.js中使用Vuex实现组件数据共享案例
Jul 31 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
php魔术变量用法实例详解
2014/11/13 PHP
php微信公众号开发之图片回复
2018/10/20 PHP
JavaScript入门学习书籍推荐
2008/06/12 Javascript
向大师们学习Javascript(视频与PPT)
2009/12/27 Javascript
javascript 的Document属性和方法集合
2010/01/25 Javascript
CSS和Javascript简单复习资料
2010/06/29 Javascript
JavaScript 计算图片加载数量的代码
2011/01/01 Javascript
了解一点js的Eval函数
2012/07/26 Javascript
JS中substring与substr的用法
2016/11/16 Javascript
微信小程序自定义导航隐藏和显示功能
2017/06/13 Javascript
微信小程序滚动Tab实现左右可滑动切换
2017/08/17 Javascript
AngularJS模态框模板ngDialog的使用详解
2018/05/11 Javascript
jQuery实现小火箭返回顶部特效
2020/02/03 jQuery
如何在JavaScript中使用localStorage详情
2021/02/04 Javascript
python实现排序算法
2014/02/14 Python
基于python实现简单日历
2018/07/28 Python
python自定义线程池控制线程数量的示例
2019/02/22 Python
pycharm 批量修改变量名称的方法
2019/08/01 Python
Python3标准库之functools管理函数的工具详解
2020/02/27 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
python自定义函数def的应用详解
2020/06/03 Python
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
2021/01/24 Python
CSS3 文字动画效果
2020/11/12 HTML / CSS
html5+css3之制作header实例与更新
2020/12/21 HTML / CSS
Photobook澳大利亚:制作相片书,婚礼卡,旅行相簿
2017/01/12 全球购物
CPB肌肤之钥美国官网:Clé de Peau Beauté
2017/09/05 全球购物
德国内衣、泳装和睡衣网上商店:Bigsize Dessous
2018/07/09 全球购物
英国最大最好的无人机商店:Drones Direct
2019/07/12 全球购物
哈弗商学院毕业生求职信
2014/02/26 职场文书
大学生职业生涯规划书
2014/03/14 职场文书
2015年护士节慰问信
2015/03/23 职场文书
2016年第二十五次全国助残日活动总结
2016/04/01 职场文书
教您:房贷工资收入证明应该怎么写?
2019/08/19 职场文书
普希金诗歌赏析(6首)
2019/08/22 职场文书
零基础学java之带返回值的方法的定义和调用
2022/04/10 Java/Android
Java设计模式之代理模式
2022/04/22 Java/Android