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 相关文章推荐
javascript cookie操作类的实现代码小结附使用方法
Jun 02 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
Jun 20 Javascript
javascript实现图片轮播效果
Jan 20 Javascript
JavaScript模版引擎的基本实现方法浅析
Feb 15 Javascript
js实现数组冒泡排序、快速排序原理
Mar 08 Javascript
jQuery中的Deferred和promise 的区别
Apr 03 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
Sep 23 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
Nov 10 Javascript
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
详解微信小程序网络请求接口封装实例
May 02 Javascript
javascript获取元素的计算样式
May 24 Javascript
vue组件的路由高亮问题解决方法
May 11 Vue.js
完美实现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面向对象全攻略 (十五) 多态的应用
2009/09/30 PHP
介绍一些PHP判断变量的函数
2012/04/24 PHP
示例详解Laravel的注册重构
2016/08/14 PHP
PHP实现的基于单向链表解决约瑟夫环问题示例
2017/09/30 PHP
Linux下安装Memcached服务器和客户端与PHP使用示例
2019/04/15 PHP
用javascript连接access数据库的方法
2006/11/17 Javascript
JXTree对象,读取外部xml文件数据,生成树的函数
2007/04/02 Javascript
select 控制网页内容隐藏于显示的实现代码
2010/05/25 Javascript
JavaScript学习笔记(一) js基本语法
2011/10/25 Javascript
document.createElement()用法
2013/03/13 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
2014/03/18 Javascript
一个不错的字符串转码解码函数(自写)
2014/07/31 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
2016/02/27 Javascript
微信小程序自定义组件
2017/08/16 Javascript
微信小程序性能优化之checkSession的使用
2019/03/06 Javascript
JavaScript正则表达式验证登录实例
2020/03/18 Javascript
JavaScript 事件代理需要注意的地方
2020/09/08 Javascript
Vue项目中使用mock.js的完整步骤
2021/01/12 Vue.js
[02:26]2018DOTA2亚洲邀请赛赛前采访-Newbee篇
2018/04/03 DOTA
Python中暂存上传图片的方法
2015/02/18 Python
python简单商城购物车实例代码
2018/03/15 Python
基于MTCNN/TensorFlow实现人脸检测
2018/05/24 Python
Python 编程速成(推荐)
2019/04/15 Python
python SQLAlchemy的Mapping与Declarative详解
2019/07/04 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
Python中__repr__和__str__区别详解
2019/11/07 Python
安装并免费使用Pycharm专业版(学生/教师)
2020/09/24 Python
CSS3实现自定义Checkbox特效实例代码
2017/04/24 HTML / CSS
泰国的头号网上婴儿用品店:Motherhood.co.th
2019/04/09 全球购物
德国二手设计师时装和复古时装跳蚤市场:Mädchenflohmarkt
2020/11/09 全球购物
第一范式(1NF)、第二范式(2NF)和第三范式(3NF)之间的区别是什么?
2016/04/28 面试题
机电一体化大学生求职信
2013/11/08 职场文书
小学三八妇女节活动方案
2014/03/16 职场文书
员工保密承诺书
2014/05/28 职场文书
2014年关工委工作总结
2014/11/17 职场文书
python实现黄金分割法的示例代码
2021/04/28 Python