jQuery插件zTree实现获取一级节点数据的方法


Posted in Javascript onMarch 08, 2017

本文实例讲述了jQuery插件zTree实现获取一级节点数据的方法。分享给大家供大家参考,具体如下:

1、实现代码:

<!DOCTYPE html>
<html>
<head>
  <title>zTree实现基本树</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" type="text/css" href="zTree_v3/css/demo.css" rel="external nofollow" >
  <link rel="stylesheet" type="text/css" href="zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="external nofollow" >
  <script type="text/javascript" src="zTree_v3/js/jquery-1.4.4.min.js"></script>
  <script type="text/javascript" src="zTree_v3/js/jquery.ztree.core.min.js"></script>
  <script type="text/javascript">
    <!--
    var setting = {
      data: {
        simpleData: {
          enable: true
        }
      }
    };
    var zNodes =[
      { id:1, pId:0, name:"湖北省", open:true},
      { id:11, pId:1, name:"武汉市", open:true},
      { id:111, pId:11, name:"汉口"},
      { id:112, pId:11, name:"汉阳"},
      { id:113, pId:11, name:"武昌"},
      { id:12, pId:1, name:"黄石市"},
      { id:121, pId:12, name:"黄石港区"},
      { id:122, pId:12, name:"西塞山区"},
      { id:123, pId:12, name:"下陆区"},
      { id:124, pId:12, name:"铁山区"},
      { id:13, pId:1, name:"黄冈市"},
      { id:131, pId:13, name:"黄州区"},
      { id:132, pId:13, name:"麻城市"},
      { id:133, pId:13, name:"武穴市"},
      { id:134, pId:13, name:"团风县"},
      { id:135, pId:13, name:"浠水县"},
      { id:136, pId:13, name:"罗田县"},
      { id:137, pId:13, name:"英山县"},
      { id:2, pId:0, name:"湖南省", open:true},
      { id:21, pId:2, name:"长沙市", open:true},
      { id:211, pId:21, name:"芙蓉区"},
      { id:212, pId:21, name:"天心区"},
      { id:213, pId:21, name:"岳麓区"},
      { id:214, pId:21, name:"开福区"},
      { id:22, pId:2, name:"株洲市"},
      { id:221, pId:22, name:"天元区"},
      { id:222, pId:22, name:"荷塘区"},
      { id:223, pId:22, name:"芦淞区"},
      { id:224, pId:22, name:"石峰区"}
    ];
    $(document).ready(function(){
      $.fn.zTree.init($("#baseTree"), setting, zNodes);
    });
    /**
     * 获取全部节点数据
     * 一级节点数据
     */
    function findNodes()
    {
      var treeObj = $.fn.zTree.getZTreeObj("baseTree");
      //获取全部节点数据
      var nodes = treeObj.getNodes();
      for (var i=0, l=nodes.length; i < l; i++)
      {
        var nodeId = nodes[i].id;
        var nodeName = nodes[i].name;
        alert("树节点编码:"+nodeId+"\n"+"树节点名称:"+nodeName);
      }
    }
    //-->
  </script>
 </head>
<body>
<div class="content_wrap">
  <div class="zTreeDemoBackground left" style="text-align: center;">
    <ul id="baseTree" class="ztree" style="height: 300px; width:200px; overflow-y: auto"></ul>
    <input type="button" id="btn" onclick="findNodes()" value="获取全部节点数据"/>
  </div>
</div>
</body>
</html>

2、实现效果图:

(1)初始化

jQuery插件zTree实现获取一级节点数据的方法

(2)单击“获取全部节点数据”

jQuery插件zTree实现获取一级节点数据的方法

(3)单击“确定”

jQuery插件zTree实现获取一级节点数据的方法

3、源码说明

var treeObj = $.fn.zTree.getZTreeObj("baseTree");
//获取全部节点数据
var nodes = treeObj.getNodes();

附:zTree_v3插件点击此处本站下载

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript中callee与caller的用法和应用场景
Dec 08 Javascript
jQuery获取this当前对象子元素对象的方法
Nov 29 Javascript
js实现类bootstrap模态框动画
Feb 07 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
Feb 15 Javascript
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
微信小程序实现美团菜单
Jun 06 Javascript
vue系列之requireJs中引入vue-router的方法
Jul 18 Javascript
js tab栏切换代码实例解析
Sep 03 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
Sep 20 Javascript
javascript实现留言板功能
Feb 08 Javascript
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
JS正则表达式验证账号、手机号、电话和邮箱是否合法
Mar 08 #Javascript
原生js实现放大镜特效
Mar 08 #Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
Mar 08 #Javascript
正则 js分转元带千分符号详解
Mar 08 #Javascript
@ResponseBody 和 @RequestBody 注解的区别
Mar 08 #Javascript
js/jq仿window文件夹框选操作插件
Mar 08 #Javascript
js实现上下左右弹框划出效果
Mar 08 #Javascript
You might like
分享8个Laravel模型时间戳使用技巧小结
2020/02/12 PHP
js调用webservice中的方法实现思路及代码
2013/02/25 Javascript
JS判断数组中是否有重复值得三种实用方法
2013/08/16 Javascript
js判断页面中是否有指定控件的简单实例
2014/03/04 Javascript
jquery中animate的stop()方法作用实例分析
2015/01/30 Javascript
jquery控制显示服务器生成的图片流
2015/08/04 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
2016/11/23 Javascript
基于jQuery实现表格的排序
2016/12/02 Javascript
JavaScript高阶函数_动力节点Java学院整理
2017/06/28 Javascript
AngularJS中controller控制器继承的使用方法
2017/11/03 Javascript
vue-router实现组件间的跳转(参数传递)
2017/11/07 Javascript
vue视频播放插件vue-video-player的具体使用方法
2019/11/08 Javascript
[01:34]2016国际邀请赛中国区预选赛IG战队教练采访
2016/06/27 DOTA
python实现zencart产品数据导入到magento(python导入数据)
2014/04/03 Python
Python编写屏幕截图程序方法
2015/02/18 Python
关于Python元祖,列表,字典,集合的比较
2017/01/06 Python
python中的常量和变量代码详解
2018/07/25 Python
Django框架实现分页显示内容的方法详解
2019/05/10 Python
python中Lambda表达式详解
2019/11/20 Python
Pytorch Tensor基本数学运算详解
2019/12/30 Python
Python递归及尾递归优化操作实例分析
2020/02/01 Python
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
2013/01/06 HTML / CSS
Tomcat的缺省是多少,怎么修改
2014/04/09 面试题
国贸专业的职业规划书
2014/03/15 职场文书
安全生产工作汇报
2014/10/28 职场文书
2014年营业员工作总结
2014/11/18 职场文书
2014流动人口计划生育工作总结
2014/12/20 职场文书
食品安全责任书范本
2015/05/09 职场文书
酒店宣传语大全
2015/07/13 职场文书
读《人生的智慧》有感:闲暇是人生的精华
2019/12/25 职场文书
JavaScript与JQuery框架基础入门教程
2021/07/15 Javascript
vue使用Google Recaptcha验证的实现示例
2021/08/23 Vue.js
Java 实战项目之家居购物商城系统详解流程
2021/11/11 Java/Android
苹果可能正在打击不进行更新的 App
2022/04/24 数码科技
Python 操作pdf pdfplumber读取PDF写入Exce
2022/08/14 Python