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 相关文章推荐
JQuery.closest(),parent(),parents()寻找父结点
Feb 17 Javascript
利用javascript判断文件是否存在
Dec 31 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
Jan 13 Javascript
详解JavaScript中undefined与null的区别
Mar 29 Javascript
JavaScript实现找出字符串中第一个不重复的字符
Sep 03 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
Sep 11 Javascript
浅析javascript函数表达式
Feb 10 Javascript
详解JavaScript对象类型
Jun 16 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
Jul 27 Javascript
利用JS实现简单的瀑布流加载图片效果
Apr 22 Javascript
vue 使用html2canvas将DOM转化为图片的方法
Sep 11 Javascript
Nuxt.js之自动路由原理的实现方法
Nov 21 Javascript
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
php学习之数据类型之间的转换介绍
2011/06/09 PHP
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
php加密解密函数authcode的用法详细解析
2013/10/28 PHP
FastCGI 进程意外退出造成500错误
2015/07/26 PHP
在CentOS系统上从零开始搭建WordPress博客的全流程记录
2016/04/21 PHP
php实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
php基于PDO实现功能强大的MYSQL封装类实例
2017/02/27 PHP
php文件上传类的分享
2017/07/06 PHP
ThinkPHP 3.2.3实现加减乘除图片验证码
2018/12/05 PHP
Locate a File Using a File Open Dialog Box
2007/06/18 Javascript
用javascript实现读取txt文档的脚本
2007/07/20 Javascript
js showModalDialog弹出窗口实例详解
2014/01/07 Javascript
JS实现局部选择打印和局部不选择打印
2014/04/03 Javascript
浅谈JavaScript 框架分类
2014/11/10 Javascript
js获取浏览器基本信息大全
2014/11/27 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
javascript弹出窗口实现代码
2015/11/12 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
2016/06/12 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
2016/06/27 Javascript
AngularJS中的Promise详细介绍及实例代码
2016/12/13 Javascript
React Native开发封装Toast与加载Loading组件示例
2018/09/08 Javascript
微信小程序引用iconfont图标的方法
2018/10/22 Javascript
Element Dropdown下拉菜单的使用方法
2020/07/26 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
2021/02/15 Javascript
Python编程scoketServer实现多线程同步实例代码
2018/01/29 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
德国童装购物网站:NICKI´S.com
2018/04/20 全球购物
墨西哥皇宫度假村预订:Palace Resorts
2018/06/16 全球购物
大学毕业的自我鉴定
2013/10/08 职场文书
秋季运动会加油稿200字
2014/01/11 职场文书
交通事故协议书范本
2014/11/18 职场文书
优秀护士事迹材料
2014/12/25 职场文书
表扬稿范文
2015/01/17 职场文书
企业财务总监岗位职责
2015/04/03 职场文书
车间主任岗位职责范本
2015/04/08 职场文书
Java 数组内置函数toArray详解
2021/06/28 Java/Android