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调用C#代码
Jan 17 Javascript
潜说js对象和数组
May 25 Javascript
基于jquery实现控制经纬度显示地图与卫星
May 20 Javascript
javascript通过className来获取元素的简单示例代码
Jan 10 Javascript
Jquery解析Json格式数据过程代码
Oct 17 Javascript
学习AngularJs:Directive指令用法(完整版)
Apr 26 Javascript
jquery div模态窗口的简单实例
May 28 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
Jun 13 Javascript
10行原生JS实现文字无缝滚动(超简单)
Jan 02 Javascript
详解小程序原生使用ES7 async/await语法
Aug 06 Javascript
从源码里了解vue中的nextTick的使用
Nov 22 Javascript
JS实现拖动模糊框特效
Aug 25 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计算指定目录下文件占用空间的方法
2015/03/13 PHP
如何在Mozilla Gecko 用Javascript加载XSL
2007/01/09 Javascript
javascript new一个对象的实质
2010/01/07 Javascript
IE与Firefox在JavaScript上的7个不同句法分享
2011/10/30 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
2013/06/16 Javascript
jquery配合css简单实现返回顶部效果
2013/09/30 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
原生javascript实现图片滚动、延时加载功能
2015/01/12 Javascript
JavaScript更改原始对象valueOf的方法
2015/03/19 Javascript
浅谈下拉菜单中的Option对象
2015/05/10 Javascript
jQuery解析XML文件同时动态增加js文件的方法
2015/06/01 Javascript
js数组去重的方法汇总
2015/07/29 Javascript
基于jquery实现全屏滚动效果
2015/11/26 Javascript
JavaScript中String对象的方法介绍
2017/01/04 Javascript
jQuery实现给input绑定回车事件的方法
2017/02/09 Javascript
微信小程序scroll-x失效的完美解决方法
2018/07/18 Javascript
react项目实践之webpack-dev-serve
2018/09/14 Javascript
关于自定义Egg.js的请求级别日志详解
2018/12/12 Javascript
JavaScript中的事件与异常捕获详析
2019/02/24 Javascript
JavaScript中变量提升和函数提升的详解
2020/08/07 Javascript
利用PHP实现递归删除链表元素的方法示例
2020/10/23 Javascript
解决vue scoped html样式无效的问题
2020/10/24 Javascript
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
基于Django快速集成Echarts代码示例
2020/12/01 Python
Python实现迪杰斯特拉算法并生成最短路径的示例代码
2020/12/01 Python
Tarte Cosmetics官网:美国最受欢迎的化妆品公司之一
2017/08/24 全球购物
Currentbody澳大利亚:美容仪专家
2019/11/11 全球购物
几道数据库的概念性面试题
2014/05/30 面试题
毕业自我鉴定
2013/11/05 职场文书
日本语毕业生自荐信
2014/02/01 职场文书
11.9消防日宣传标语
2014/10/08 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
员工福利申请报告
2015/05/15 职场文书
2016年教代会开幕词
2016/03/04 职场文书
企业管理制度设计时要注意的几种“常见病”!
2019/04/19 职场文书
JPA 通过Specification如何实现复杂查询
2021/11/23 Java/Android