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调试工具 Javascript Debug Toolkit 2.0.0版本发布
Dec 02 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
Jan 31 Javascript
原生JavaScript编写俄罗斯方块
Mar 30 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
Sep 19 Javascript
基于JavaScript短信验证码如何实现
Jan 24 Javascript
简单实现js间歇或无缝滚动效果
Jun 29 Javascript
JavaScript递归操作实例浅析
Oct 31 Javascript
bootstrap datetimepicker日期插件使用方法
Jan 13 Javascript
vue2笔记 — vue-router路由懒加载的实现
Mar 03 Javascript
Angular2中如何使用ngx-translate进行国际化
May 21 Javascript
小程序页面动态配置实现方法
Feb 05 Javascript
uniapp引入支付宝原生扫码插件步骤详解
Jul 23 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
经典的PHPer为什么被认为是草根?
2007/04/02 PHP
apache中为php 设置虚拟目录
2014/12/17 PHP
zend framework中使用memcache的方法
2016/03/04 PHP
form表单传递数组数据、php脚本接收的实例
2017/02/09 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
关于Yii中模型场景的一些简单介绍
2019/09/22 PHP
jquery判断单个复选框是否被选中的代码
2009/09/03 Javascript
Prototype源码浅析 Enumerable部分(二)
2012/01/18 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
2013/01/17 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
javascript中基本类型和引用类型的区别分析
2015/05/12 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
2015/08/13 Javascript
JQuery实现图片轮播效果
2015/09/15 Javascript
在JavaScript中使用JSON数据
2016/02/15 Javascript
简单了解JavaScript操作XPath的一些基本方法
2016/06/03 Javascript
jQuery实现可移动选项的左右下拉列表示例
2016/12/26 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
2017/12/07 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
通过js动态创建标签,并设置属性方法
2018/02/24 Javascript
JS canvas绘制五子棋的棋盘
2020/05/28 Javascript
vue项目部署到nginx/tomcat服务器的实现
2019/08/26 Javascript
[01:37]DOTA2超级联赛专访ChuaN 传奇般的电竞之路
2013/06/19 DOTA
重命名批处理python脚本
2013/04/05 Python
python获取本机外网ip的方法
2015/04/15 Python
Python中几种导入模块的方式总结
2017/04/27 Python
python中set()函数简介及实例解析
2018/01/09 Python
python爬取个性签名的方法
2018/06/17 Python
Python 、Pycharm、Anaconda三者的区别与联系、安装过程及注意事项
2019/10/11 Python
Python基础之变量基本用法与进阶详解
2020/01/03 Python
基于python实现matlab filter函数过程详解
2020/06/08 Python
Pandas缺失值2种处理方式代码实例
2020/06/13 Python
HTML5+JS实现俄罗斯方块原理及具体步骤
2013/11/29 HTML / CSS
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
个人社会实践自我鉴定
2014/03/24 职场文书
孔庙导游词
2015/02/04 职场文书
数学教师个人总结
2015/02/06 职场文书