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插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
Jquery把获取到的input值转换成json
May 15 jQuery
jQuery表单验证之密码确认
May 22 jQuery
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
Vue中正确使用jQuery的方法
Oct 30 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
webpack写jquery插件的环境配置
Dec 21 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 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
简单介绍下 PHP5 中引入的 MYSQLI的用途
2007/03/19 PHP
PHP 文件上传功能实现代码
2009/06/24 PHP
PHP中获取文件创建日期、修改日期、访问时间的方法
2016/11/05 PHP
JavaScript cookie的设置获取删除详解
2014/02/11 Javascript
原生js页面滚动延迟加载图片
2015/12/20 Javascript
利用JS生成博文目录及CSS定制博客
2016/02/10 Javascript
值得分享的bootstrap table实例
2016/09/22 Javascript
微信小程序 获取设备信息 API实例详解
2016/10/02 Javascript
浅谈Postman解决token传参的问题
2018/03/31 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
2018/12/13 Javascript
vue父子组件通信的高级用法示例
2019/08/29 Javascript
vue项目中极验验证的使用代码示例
2019/12/03 Javascript
VUE实现自身整体组件销毁的示例代码
2020/01/13 Javascript
详解JS深拷贝与浅拷贝
2020/08/04 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
2020/11/03 Javascript
[01:04]DOTA2:伟大的Roshan雕塑震撼来临
2015/01/30 DOTA
Python中还原JavaScript的escape函数编码后字符串的方法
2014/08/22 Python
利用python爬取散文网的文章实例教程
2017/06/18 Python
python编程实现12306的一个小爬虫实例
2017/12/27 Python
python3实现公众号每日定时发送日报和图片
2018/02/24 Python
python实现文本界面网络聊天室
2018/12/12 Python
python flask框架实现传数据到js的方法分析
2019/06/11 Python
Django框架视图介绍与使用详解
2019/07/18 Python
python线程中的同步问题及解决方法
2019/08/29 Python
Python APScheduler执行使用方法详解
2020/12/10 Python
深入解析HTML5的IndexedDB索引数据库
2015/09/14 HTML / CSS
C#面试常见问题
2013/02/25 面试题
教师自我鉴定
2013/12/13 职场文书
上班离岗检讨书
2014/01/27 职场文书
社区四风存在问题及整改措施
2014/10/26 职场文书
中学生社区服务活动报告
2015/02/05 职场文书
大学生个人总结范文
2015/02/15 职场文书
综合办公室岗位职责
2015/04/11 职场文书
2015年社区统计工作总结
2015/04/21 职场文书
一文了解MYSQL三大范式和表约束
2022/04/03 MySQL
SQL Server数据库备份和恢复数据库的全过程
2022/06/14 SQL Server