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 Mobile入门—外部链接切换示例代码
Jan 08 Javascript
JavaScript等比例缩放图片控制超出范围的图片
Aug 06 Javascript
深入学习jQuery Validate表单验证(二)
Jan 18 Javascript
教你一步步用jQyery实现轮播器
Dec 18 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
Dec 28 Javascript
原生js实现图片放大缩小计时器效果
Jan 20 Javascript
vue监听scroll的坑的解决方法
Sep 07 Javascript
vue-scroller记录滚动位置的示例代码
Jan 17 Javascript
解决webpack无法通过IP地址访问localhost的问题
Feb 22 Javascript
JS实现点击按钮可实现编辑功能
Jul 03 Javascript
JavaScript基础之静态方法和实例方法分析
Dec 26 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
Nov 06 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
PHP4实际应用经验篇(3)
2006/10/09 PHP
php生成缩略图填充白边(等比缩略图方案)
2013/12/25 PHP
用javascript控制iframe滚动的代码
2007/04/10 Javascript
(仅IE下有效)关于checkbox 三态
2007/05/12 Javascript
JavaScript 学习笔记(十六) js事件
2010/02/01 Javascript
jQuery load方法用法集锦
2011/12/06 Javascript
js获取字符串最后一位方法汇总
2014/11/13 Javascript
JavaScript中匿名函数用法实例
2015/03/23 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
2015/11/15 Javascript
详解js中class的多种函数封装方法
2016/01/03 Javascript
详解Node.js中的事件机制
2016/09/22 Javascript
bootstrap模态框消失问题的解决方法
2016/12/02 Javascript
Vue的MVVM实现方法
2017/08/16 Javascript
vue实现全选和反选功能
2017/08/31 Javascript
JS简单生成由字母数字组合随机字符串示例
2018/05/25 Javascript
JavaScript中set与get方法用法示例
2018/08/15 Javascript
vue-swiper的使用教程
2018/08/30 Javascript
详解JavaScript的数据类型以及数据类型的转换
2019/04/20 Javascript
vue 解决文本框被键盘遮住的问题
2019/11/06 Javascript
[04:48]DOTA2亚洲邀请赛林书豪为VGJ加油
2017/04/01 DOTA
Python实现股市信息下载的方法
2015/06/15 Python
浅析Python中的多条件排序实现
2016/06/07 Python
Python实现的求解最大公约数算法示例
2018/05/03 Python
python numpy 一维数组转变为多维数组的实例
2018/07/02 Python
分析python请求数据
2018/08/19 Python
keras处理欠拟合和过拟合的实例讲解
2020/05/25 Python
使用keras和tensorflow保存为可部署的pb格式
2020/05/25 Python
Python如何重新加载模块
2020/07/29 Python
CSS3 translate导致字体模糊的实例代码
2019/08/30 HTML / CSS
css3 2D图片转动样式可以扩充到Js当中
2014/04/29 HTML / CSS
html5 canvas-1.canvas介绍(hello canvas)
2013/01/07 HTML / CSS
英智兴达软件测试笔试题
2016/10/12 面试题
化工专业大学生职业生涯规划书
2014/01/14 职场文书
冲出亚马逊观后感
2015/06/03 职场文书
学术会议开幕词
2016/03/03 职场文书
零基础学java之带返回值的方法的定义和调用
2022/04/10 Java/Android