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查看html源文件
Nov 08 Javascript
(function($){...})(jQuery)的意思
Jul 22 Javascript
用JS在浏览器中创建下载文件
Mar 05 Javascript
使用typeof方法判断undefined类型
Sep 09 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
Jul 01 Javascript
js如何打印object对象
Oct 16 Javascript
BootStrap创建响应式导航条实例代码
May 31 Javascript
webpack实现热更新(实施同步刷新)
Jul 28 Javascript
vue click.stop阻止点击事件继续传播的方法
Sep 04 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
Oct 18 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
May 21 Javascript
小程序实现短信登录倒计时
Jul 12 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
javascript中的几个运算符
2007/06/29 Javascript
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
JS的document.all函数使用示例
2013/12/30 Javascript
js window.onload 加载多个函数和追加函数详解
2014/01/08 Javascript
使用mini-define实现前端代码的模块化管理
2014/12/25 Javascript
JavaScript函数作用域链分析
2015/02/13 Javascript
JavaScript日期类型的一些用法介绍
2015/03/02 Javascript
JavaScript实现打开链接页面的方式汇总
2016/06/02 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
利用python分析access日志的方法
2016/10/26 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
Vue.js实战之利用vue-router实现跳转页面
2017/04/01 Javascript
图片懒加载imgLazyLoading.js使用详解
2020/09/15 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
2018/08/14 jQuery
vue自定v-model实现表单数据双向绑定问题
2018/09/03 Javascript
vue-cli中使用高德地图的方法示例
2019/03/28 Javascript
vue实现点击按钮下载文件功能
2019/10/11 Javascript
js 实现watch监听数据变化的代码
2019/10/13 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
js最全的数组的降维5种办法(小结)
2020/04/28 Javascript
Python群发邮件实例代码
2014/01/03 Python
深入剖析Python的爬虫框架Scrapy的结构与运作流程
2016/01/20 Python
Python列表切片用法示例
2017/04/19 Python
python中将一个全部为int的list 转化为str的list方法
2018/04/09 Python
安装docker-compose的两种最简方法
2019/07/30 Python
python如何使用socketserver模块实现并发聊天
2019/12/14 Python
Python实现区域填充的示例代码
2021/02/03 Python
浅谈盘点5种基于Python生成的个性化语音方法
2021/02/05 Python
学校2014重阳节活动策划方案
2014/09/16 职场文书
2014年绿化工作总结
2014/12/09 职场文书
2014年教研员工作总结
2014/12/23 职场文书
初婚初育证明范本
2015/06/18 职场文书
基于Python实现的购物商城管理系统
2021/04/27 Python
简单了解 MySQL 中相关的锁
2021/05/25 MySQL
nginx实现多geoserver服务的负载均衡
2022/05/15 Servers
Typescript类型系统FLOW静态检查基本规范
2022/05/25 Javascript