jQuery zTree树插件的使用教程


Posted in jQuery onAugust 16, 2019

本文为大家分享了jQuery zTree树插件的使用教程,供大家参考,具体内容如下

一、介绍

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

官网地址

特点:

  • zTree v3.0 将核心代码按照功能进行了分割,不需要的代码可以不用加载
  • 采用了 延迟加载 技术,上万节点轻松加载,即使在 IE6 下也能基本做到秒杀
  • 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
  • 支持 JSON 数据
  • 支持静态 和 Ajax 异步加载节点数据
  • 支持任意更换皮肤 / 自定义图标(依靠css)
  • 支持极其灵活的 checkbox 或 radio 选择功能
  • 提供多种事件响应回调
  • 灵活的编辑(增/删/改/查)功能,可随意拖拽节点,还可以多节点拖拽哟
  • 在一个页面内可同时生成多个 Tree 实例
  • 简单的参数配置实现 灵活多变的功能

二、使用

(1)引入ztree组件

注意:需要添加jquery依赖

<link href="static/jquery-ztree/3.5.36/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="static/jquery/3.3.1/jquery-3.3.1.min.js"></script>
<script src="static/jquery-ztree/3.5.36/js/jquery.ztree.all.min.js" type="text/javascript"></script>

(2)向body中添加div

<div>
  <div id="treeDemo" class="ztree">
  </div>
</div>

(3)添加ztree设置

<SCRIPT LANGUAGE="JavaScript">
    var zTreeObj;
    // zTree 的参数配置,深入使用请参考 API 文档(setting 配置详解)
    var setting = {};
    // zTree 的数据属性,深入使用请参考 API 文档(zTreeNode 节点数据详解)
   var zNodes = [{
       name: "test1",
       open: true,
       children: [
        { name: "test1_1" }, { name: "test1_2" }
         ]
       },
      {
        name: "test2",
        open: true,
        children: [
         { name: "test2_1" }, { name: "test2_2" }
        ]
      }
    ];
  $(document).ready(function() {
  zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
 zTreeObj.expandAll(true);//展开树
</SCRIPT>

(4)页面效果

jQuery zTree树插件的使用教程

(5)项目截图及html代码

jQuery zTree树插件的使用教程

html页面

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>ztree测试页面</title>
    <link href="static/jquery-ztree/3.5.36/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="static/jquery/3.3.1/jquery-3.3.1.min.js"></script>
    <script src="static/jquery-ztree/3.5.36/js/jquery.ztree.all.min.js" type="text/javascript"></script>
  </head>

  <body>
    <div>
      <div id="treeDemo" class="ztree">
      </div>
    </div>
    <SCRIPT LANGUAGE="JavaScript">
      var zTreeObj;
      // zTree 的参数配置,深入使用请参考 API 文档(setting 配置详解)
      var setting = {};
      // zTree 的数据属性,深入使用请参考 API 文档(zTreeNode 节点数据详解)
      var zNodes = [{
          name: "test1",
          open: true,
          children: [
            { name: "test1_1" }, { name: "test1_2" }
          ]
        },
        {
          name: "test2",
          open: true,
          children: [
            { name: "test2_1" }, { name: "test2_2" }
          ]
        }
      ];
      $(document).ready(function() {
        zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
      });
    </SCRIPT>
  </body>

</html>

三、一些方法

(1)设置展开树

$(document).ready(function() {
        zTreeObj = $.fn.zTree.init($("#ztree"), setting, zNodes);

        //展开所以节点
        //zTreeObj.expandAll(true);

        //展开第一级数节点
        var nodes = zTreeObj.getNodesByParam("level", 0);
        for(var i = 0; i < nodes.length; i++) {
          zTreeObj.expandNode(nodes[i], true, false, false);
        }
      });

四、setting 配置详解

一些比较常用的配置

(一)check

1、enable: true  
设置 zTree 的节点上是否显示 checkbox / radio
默认值: false

(二)view

 selectedMulti: false 设置是否允许同时选中多个节点。默认是true

(三)data

simpleData: { enable: true, idKey: 'id', pIdKey: 'pid', rootPId: '0' }

 var zNodes = [{ "id": 1, "pid": 0, "name": "test1" },
          { "id": 11, "pid": 1, "name": "test11" },
          { "id": 12, "pid": 1, "name": "test12" },
          { "id": 111, "pid": 11, "name": "test111" }
        ];

效果:

jQuery zTree树插件的使用教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
jquery Form轻松实现文件上传
May 24 jQuery
简单实现jQuery手风琴效果
Aug 18 jQuery
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
基于jquery实现左右上下移动效果
May 02 jQuery
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
jQuery实现动态向上滚动
Dec 21 jQuery
jQuery zTree插件快速实现目录树
Aug 16 #jQuery
jQuery zTree插件使用简单教程
Aug 16 #jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 #jQuery
jQuery提示框插件SweetAlert用法分析
Aug 05 #jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 #jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 #jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 #jQuery
You might like
Apache, PHP在Windows 9x/NT下的安装与配置 (二)
2006/10/09 PHP
php !function_exists(&quot;T7FC56270E7A70FA81A5935B72EACBE29&quot;))代码解密
2011/01/07 PHP
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
ThinkPHP模板判断输出Empty标签用法详解
2014/06/30 PHP
PHP实现根据密码长度显示安全条
2017/07/04 PHP
javascript Base类 包含基本的方法
2009/07/22 Javascript
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
2010/01/12 Javascript
javascript采用数组实现tab菜单切换效果
2012/12/12 Javascript
22点关于jquery性能优化的建议
2014/05/28 Javascript
asp.net+js实现金额格式化
2015/02/27 Javascript
跟我学习javascript的循环
2015/11/18 Javascript
JavaScript 经典实例日常收集整理(常用经典)
2016/03/30 Javascript
jQuery 调用WebService 实例讲解
2016/06/28 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
2016/09/14 Javascript
新闻上下滚动jquery 超简洁(必看篇)
2017/01/21 Javascript
JS实现的五级联动菜单效果完整实例
2017/02/23 Javascript
Vue中使用Sortable的示例代码
2018/04/07 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
2018/11/26 Javascript
vue props对象validator自定义函数实例
2019/11/13 Javascript
[01:44]剑指西雅图 展望TI之CIS战队专访
2014/06/25 DOTA
浅谈Python中range和xrange的区别
2017/12/20 Python
Python socket实现简单聊天室
2018/04/01 Python
python基于socket进行端口转发实现后门隐藏的示例
2019/07/25 Python
Python2手动安装更新pip过程实例解析
2020/07/16 Python
Nike荷兰官方网站:Nike.com (NL)
2018/04/19 全球购物
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
servlet面试题
2012/08/20 面试题
大学生个人求职信范文
2013/09/21 职场文书
社区健康教育实施方案
2014/03/18 职场文书
公司合作协议范文
2014/10/01 职场文书
个人融资协议书范本两则
2014/10/15 职场文书
2014年学生会干事工作总结
2014/11/07 职场文书
数学教师个人工作总结
2015/02/06 职场文书
2016高考寄语或鼓励的话语
2015/12/04 职场文书
在Python 中将类对象序列化为JSON
2022/04/06 Python
Nginx如何配置根据路径转发详解
2022/07/23 Servers