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 相关文章推荐
3Z版基于jquery的图片复选框(asp.net+jquery)
Apr 12 Javascript
jQuery JSON的解析方式分享
Apr 05 Javascript
javascript小数四舍五入多种方法实现
Dec 23 Javascript
基于JQuery 滑动与动画的说明介绍
Apr 18 Javascript
jquery js 获取时间差、时间格式具体代码
Jun 05 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
Jun 19 Javascript
深入理解JQuery keyUp和keyDown的区别
Dec 12 Javascript
js时间比较 js计算时间差的简单实现方法
Aug 26 Javascript
AngularJS变量及过滤器Filter用法分析
Nov 22 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
Mar 09 Javascript
vuejs中父子组件之间通信方法实例详解
Jan 17 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
Oct 09 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
php的list()的一步操作给一组变量进行赋值的使用
2011/05/18 PHP
PHP中soap的用法实例
2014/10/24 PHP
php实现计数器方法小结
2015/01/05 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
PHP 对象继承原理与简单用法示例
2020/04/21 PHP
javascript Discuz代码中的msn聊天小功能
2008/05/25 Javascript
使用javascript过滤html的字符串(注释标记法)
2013/07/08 Javascript
基于jQuery的图片不完全按比例自动缩小
2014/07/11 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
2015/06/17 Javascript
Bootstrap按钮组件详解
2016/04/26 Javascript
在html中引入外部js文件,并调用带参函数的方法
2016/10/31 Javascript
sea.js常用的api简易文档
2016/11/15 Javascript
vue中页面跳转拦截器的实现方法
2017/08/23 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
2017/10/31 Javascript
VeeValidate在vue项目里表单校验应用案例
2018/05/09 Javascript
vue2单元测试环境搭建
2018/05/24 Javascript
JavaScript引用类型Function实例详解
2018/08/09 Javascript
详解从NodeJS搭建中间层再谈前后端分离
2018/11/13 NodeJs
基于mpvue搭建微信小程序项目框架的教程详解
2019/04/10 Javascript
在Layui中实现开关按钮的效果实例
2019/09/29 Javascript
[27:53]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS iG
2014/05/26 DOTA
python网页请求urllib2模块简单封装代码
2014/02/07 Python
python是否适合网页编程详解
2019/10/04 Python
pytorch forward两个参数实例
2020/01/17 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
总结html5自定义属性有哪些
2020/04/01 HTML / CSS
Merrell迈乐澳大利亚网站:购买户外登山鞋
2017/05/28 全球购物
Elemis美国官网:英国的第一豪华护肤品牌
2018/03/15 全球购物
英国绿色商店:Natural Collection
2019/05/03 全球购物
美国椅子和沙发制造商:La-Z-Boy
2020/10/25 全球购物
美国狗旅行和户外用品领先供应商:kurgo
2020/08/18 全球购物
公司新员工的演讲稿注意事项
2014/01/01 职场文书
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
放牛班的春天观后感
2015/06/01 职场文书
创业计划书详解
2019/07/19 职场文书
解读MySQL的客户端和服务端协议
2021/05/10 MySQL