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 相关文章推荐
Extjs中DisplayField的日期或者数字格式化扩展
Sep 03 Javascript
javascript中substr,substring,slice.splice的区别说明
Nov 25 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
Jun 27 Javascript
使用jquery获取网页中图片高度的两种方法
Sep 26 Javascript
JavaScript数字和字符串转换示例
Mar 26 Javascript
JavaScript  event对象整理及详细介绍
Oct 10 Javascript
JavaScript用JSONP跨域请求数据实例详解
Jan 06 Javascript
深入理解Javascript中的作用域链和闭包
Apr 25 Javascript
彻底理解js面向对象之继承
Feb 04 Javascript
p5.js入门教程之键盘交互
Mar 19 Javascript
Vue插件之滑动验证码用法详解
Apr 05 Javascript
Vuex中的Mutations的具体使用方法
Jun 01 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
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
如何使用PHP获取网络上文件
2006/10/09 PHP
php下网站防IP攻击代码,超级实用
2010/10/24 PHP
php实现有序数组打印或排序的方法【附Python、C及Go语言实现代码】
2016/11/10 PHP
浅谈laravel-admin form中的数据,在提交后,保存前,获取并进行编辑
2019/10/21 PHP
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
De facto standard 世界上不可思议的事实标准
2010/08/29 Javascript
jquery.qrcode在线生成二维码使用示例
2013/08/21 Javascript
JavaScript原型链示例分享
2014/01/26 Javascript
javascript中加号(+)操作符的一些神奇作用
2014/06/06 Javascript
JS判断字符串包含的方法
2015/05/05 Javascript
实现React单页应用的方法详解
2016/08/02 Javascript
JS调用打印机功能简单示例
2016/11/28 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
2016/12/08 Javascript
bootstrap实现图片自动轮播
2016/12/21 Javascript
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
socket.io学习教程之深入学习篇(三)
2017/04/29 Javascript
Vue组件之极简的地址选择器的实现
2018/05/31 Javascript
vscode 开发Vue项目的方法步骤
2018/11/25 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
js prototype和__proto__的关系是什么
2019/08/23 Javascript
js模拟实现烟花特效
2020/03/10 Javascript
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
[19:24]DOTA2客户端使用指南 一分钟快速设置轻松超神
2013/09/24 DOTA
Python爬虫框架Scrapy安装使用步骤
2014/04/01 Python
Python之eval()函数危险性浅析
2014/07/03 Python
用十张图详解TensorFlow数据读取机制(附代码)
2018/02/06 Python
在python中pandas的series合并方法
2018/11/12 Python
python实现网页自动签到功能
2019/01/21 Python
python加载自定义词典实例
2019/12/06 Python
KIKO MILANO荷兰网上商店:意大利专业化妆品品牌
2017/05/12 全球购物
康帕斯酒店预订:Compass Hospitality(支持中文)
2018/08/23 全球购物
《学会待客》教学反思
2014/02/22 职场文书
困难补助申请报告
2015/05/19 职场文书
Java多条件判断场景中规则执行器的设计
2021/06/26 Java/Android
一文了解MYSQL三大范式和表约束
2022/04/03 MySQL