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: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:"石峰区"},
      { id:23, pId:2, name:"湘潭市"},
      { id:231, pId:23, name:"雨湖区"},
      { id:232, pId:23, name:"岳塘区"},
      { id:233, pId:23, name:"湘乡市"},
      { id:234, pId:23, name:"韶山市"}
    ];
    $(document).ready(function(){
      $.fn.zTree.init($("#baseTree"), setting, zNodes);
    });
    /**
     * 获取选中节点的编码和名称
     */
    function findSelect()
    {
       var treeObj = $.fn.zTree.getZTreeObj("baseTree");
       var nodes = treeObj.getSelectedNodes();
       for(var i=0;i<nodes.length;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="findSelect()" value="获取选中节点"/>
  </div>
</div>
</body>
</html>

2、设计效果图:

(1)初始化

jQuery插件zTree实现的基本树与节点获取操作示例

(2)单击按钮

jQuery插件zTree实现的基本树与节点获取操作示例

3、设计说明

获取 zTree 当前被选中的节点数据集合

var treeObj = $.fn.zTree.getZTreeObj("baseTree");
var nodes = treeObj.getSelectedNodes();

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

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

Javascript 相关文章推荐
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 Javascript
jquery统计用户选中的复选框的个数
Jun 06 Javascript
js匿名函数的调用示例(形式多种多样)
Aug 20 Javascript
jQuery中(function($){})(jQuery)详解
Jul 15 Javascript
学习javascript面向对象 javascript实现继承的方式
Jan 04 Javascript
分享12个实用的jQuery代码片段
Mar 09 Javascript
使用AJAX实现Web页面进度条的实例分享
May 06 Javascript
javascript操作cookie
Jan 17 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
Mar 17 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
Jun 21 Javascript
React-Native中禁用Navigator手势返回的示例代码
Sep 09 Javascript
解决Element中el-date-picker组件不回填的情况
Nov 07 Javascript
完美实现js选项卡切换效果(一)
Mar 08 #Javascript
jQuery插件zTree实现删除树节点的方法示例
Mar 08 #Javascript
原生JS仿QQ阅读点击展开、收起效果
Mar 08 #Javascript
jQuery插件zTree实现删除树子节点的方法示例
Mar 08 #Javascript
解析jquery easyui tree异步加载子节点问题
Mar 08 #Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
Mar 08 #Javascript
jQuery使用EasyUi实现三级联动下拉框效果
Mar 08 #Javascript
You might like
用PHP4访问Oracle815
2006/10/09 PHP
php中批量替换文件名的实现代码
2011/07/20 PHP
php中memcache 基本操作实例
2015/05/17 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
MultiSelect左右选择控件的设计与实现介绍
2013/06/08 Javascript
jquery的相对父元素和相对文档定位示例代码
2013/08/02 Javascript
Javascript中对象继承的实现小例
2014/05/12 Javascript
简单实现AngularJS轮播图效果
2020/04/10 Javascript
为什么我们要做三份 Webpack 配置文件
2017/09/18 Javascript
js装饰设计模式学习心得
2018/02/17 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
2018/08/16 Javascript
element-ui循环显示radio控件信息的方法
2018/08/24 Javascript
详解如何使用webpack打包多页jquery项目
2019/02/01 jQuery
面试题:react和vue的区别分析
2019/04/08 Javascript
JS求1到任意数之间的所有质数的方法详解
2019/05/20 Javascript
Vue监听页面刷新和关闭功能
2019/06/20 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
2019/07/23 Javascript
Vue基础配置讲解
2019/11/29 Javascript
[14:36]2014 DOTA2国际邀请赛中国区预选赛5.21 Orenda VS NE
2014/05/22 DOTA
[02:08:58]2014 DOTA2国际邀请赛中国区预选赛 Ne VS CIS
2014/05/22 DOTA
Python 用户登录验证的小例子
2013/03/06 Python
Python基于有道实现英汉字典功能
2015/07/25 Python
Python编程实现输入某年某月某日计算出这一天是该年第几天的方法
2017/04/18 Python
解决python selenium3启动不了firefox的问题
2018/10/13 Python
Django中的session用法详解
2020/03/09 Python
Python直接赋值及深浅拷贝原理详解
2020/09/05 Python
基于ccs3的timeline时间线实现方法
2020/04/30 HTML / CSS
英国家居用品和家居装饰品购物网站:Cox & Cox
2019/08/25 全球购物
医药专业应届毕业生求职信范文
2014/01/01 职场文书
酒店led欢迎词
2014/01/09 职场文书
学校食堂标语
2014/10/06 职场文书
2014年酒店工作总结与计划
2014/11/17 职场文书
2015年建筑工作总结报告
2015/05/04 职场文书
CSS3点击按钮圆形进度打钩效果的实现代码
2021/03/30 HTML / CSS
Python连接Postgres/Mysql/Mongo数据库基本操作大全
2021/06/29 Python
CSS 鼠标点击拖拽效果的实现代码
2022/12/24 HTML / CSS