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中查找不以XX字符结尾的单词示例代码
Oct 15 Javascript
JS限制文本框只能输入数字和字母方法
Feb 28 Javascript
详解JavaScript的Polymer框架中的通知交互
Jul 29 Javascript
Bootstrap按钮下拉菜单组件详解
May 10 Javascript
解决angularjs中同步执行http请求的方法
Aug 13 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
解决vue axios的封装 请求状态的错误提示问题
Sep 25 Javascript
vue中过滤器filter的讲解
Jan 21 Javascript
vue路由对不同界面进行传参及跳转的总结
Apr 20 Javascript
小谈angular ng deploy的实现
Apr 07 Javascript
如何在 Vue 表单中处理图片
Jan 26 Vue.js
js前端设计模式优化50%表单校验代码示例
Jun 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
MacOS 安装 PHP的图片裁剪扩展Tclip
2015/03/25 PHP
PHP序列化操作方法分析
2016/09/28 PHP
Javascript的一种模块模式
2008/03/22 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
2013/07/05 Javascript
web css实现整站样式互相切换
2013/10/29 Javascript
js判断字符是否是汉字的两种方法小结
2014/01/03 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
2016/08/29 Javascript
jquery自定义表单验证插件
2016/10/12 Javascript
详解nodeJS中读写文件方法的区别
2017/03/06 NodeJs
npm 下载指定版本的组件方法
2018/05/17 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
解决vue.js 数据渲染成功仍报错的问题
2018/08/25 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
2018/11/01 Javascript
ES6中异步对象Promise用法详解
2019/07/31 Javascript
Vue toFixed保留两位小数的3种方式
2020/10/23 Javascript
Python 字符串中的字符倒转
2008/09/06 Python
详解Python编程中基本的数学计算使用
2016/02/04 Python
python 截取 取出一部分的字符串方法
2017/03/01 Python
使用Python微信库itchat获得好友和群组已撤回的消息
2018/06/24 Python
python中的json总结
2018/10/11 Python
解决python线程卡死的问题
2019/02/18 Python
python 使用opencv 把视频分割成图片示例
2019/12/12 Python
Django分组聚合查询实例分享
2020/04/29 Python
django rest framework使用django-filter用法
2020/07/15 Python
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
韩国现代百货官网:Hmall
2018/03/21 全球购物
英国设计师泳装、沙滩装和比基尼在线精品店:Beach Cafe
2019/08/28 全球购物
小学科学教学反思
2014/01/26 职场文书
函授本科个人自我鉴定
2014/03/25 职场文书
出纳岗位职责
2015/01/31 职场文书
2015年村计划生育工作总结
2015/04/28 职场文书
给下属加薪申请报告
2015/05/15 职场文书
师德师风心得体会(2016精选篇)
2016/01/12 职场文书
个人落户申请书怎么写?
2019/06/28 职场文书
python获取淘宝服务器时间的代码示例
2021/04/22 Python