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实现图片上传前本地预览
Apr 28 jQuery
jQuery实现div跟随鼠标移动
Aug 20 jQuery
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
Vue中正确使用jQuery的方法
Oct 30 jQuery
jquery实现左右轮播切换效果
Jan 01 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
jquery实现拖拽添加元素功能
Dec 01 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
谈一谈收音机的高放电路
2021/03/02 无线电
简单的用PHP编写的导航条程序
2006/10/09 PHP
PHP原生模板引擎 最简单的模板引擎
2012/04/25 PHP
php文件夹与文件目录操作函数介绍
2013/09/09 PHP
jquery创建div 实现代码
2009/04/27 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
2013/05/08 Javascript
js日期相关函数总结分享
2013/10/15 Javascript
javascript中怎么做对象的类型判断
2013/11/11 Javascript
js中直接声明一个对象的方法
2014/08/10 Javascript
浅谈Nodejs观察者模式
2015/10/13 NodeJs
jquery验证邮箱格式是否正确实例讲解
2015/11/16 Javascript
layui分页效果实现代码
2017/05/19 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
vue 获取及修改store.js里的公共变量实例
2019/11/06 Javascript
[27:28]Ti4 冒泡赛第二天 iG vs NEWBEE 1
2014/07/15 DOTA
[03:24]2014DOTA2国际邀请赛 神秘商店生意火爆
2014/07/18 DOTA
Python的Flask框架中SQLAlchemy使用时的乱码问题解决
2015/11/07 Python
Python 文件管理实例详解
2015/11/10 Python
深入理解Python装饰器
2016/07/27 Python
用Python解决计数原理问题的方法
2016/08/04 Python
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
Python调用服务接口的实例
2019/01/03 Python
python装饰器原理与用法深入详解
2019/12/19 Python
Python如何批量获取文件夹的大小并保存
2020/03/31 Python
Python基于Hypothesis测试库生成测试数据
2020/04/29 Python
基于keras中的回调函数用法说明
2020/06/17 Python
玖熙女鞋美国官网:Nine West
2016/10/06 全球购物
印度在线购物网站:Paytmmall
2019/07/24 全球购物
德国最新街头服饰网上商店:BODYCHECK
2019/09/15 全球购物
介绍一下linux的文件权限
2012/02/15 面试题
《跨越百年的美丽》教学反思
2014/02/11 职场文书
百货商场楼层班组长竞聘书
2014/03/31 职场文书
会计演讲稿范文
2014/05/23 职场文书
圣诞节活动策划方案
2014/06/09 职场文书
初中生毕业评语
2014/12/29 职场文书
PyCharm 配置SSH和SFTP连接远程服务器
2022/05/11 Python