前端 -＞ zTree -- jQuery 树插件

欧皇小德子

已于 2022-02-16 16:49:32 修改

阅读量661

点赞数

分类专栏：前端文章标签：前端 jquery javascript

于 2020-12-23 11:27:49 首次发布

本文链接：https://blog.csdn.net/rod0320/article/details/111578723

版权

前端专栏收录该内容

25 篇文章

订阅专栏

文章目录

详细参考官方网址:

上图

在这里插入图片描述

setting 配置详解 zTree 方法详解

参考:zTree v3.5.46 API 文档
在这里插入图片描述

zTree v3.x 入门指南

在这里插入图片描述

蓝奏云css文件下载:

你也可以去官方的地方下载

考虑到还是会有第一次使用 zTree 的朋友，因此入门指南不能少
至少让大家快速明白如何开始制作一棵属于自己的树。

步骤 1、文件准备
将需要使用的 zTree v3.x 相关的 js、css、img 文件分别放置到相应目录，并且保证相对路径正确

步骤 2、编写 html 页面
按照以下代码，制作 html 页面，访问试试看吧，注意：
    1) "<!DOCTYPE html>" 是必需的！
    2) zTree 的容器 className 别忘了设置为 "ztree"
    3) 入门成功后，就可以按照顺序去看 Demo 了，直接看看源码，应该能看懂的

<!DOCTYPE html>
<HTML>
<HEAD>
  <TITLE> ZTREE DEMO </TITLE>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="./zTree_v3/css/demo.css" type="text/css">
  <link rel="stylesheet" href="./zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
  <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.js"></script>
  <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>
</HEAD>
<BODY>
<div>
  <ul id="treeDemo" class="ztree"></ul>
</div>
</BODY>
</HTML>

在这里插入图片描述