zTree学习-1

最新推荐文章于 2022-05-07 09:25:59 发布

LUSHIJIE__

最新推荐文章于 2022-05-07 09:25:59 发布

阅读量165

点赞数

分类专栏：笔记文章标签：其他

本文链接：https://blog.csdn.net/LUSHIJIE__/article/details/110929653

版权

笔记专栏收录该内容

30 篇文章 0 订阅

订阅专栏

系列文章目录

文章目录

系列文章目录
一、zTree 简介
二、使用步骤
运行效果：
总结

一、zTree 简介

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。

二、使用步骤

1.下载zTree

链接：点击链接下载zTree

2.zTree下载后的文件夹分析

在这里插入图片描述

3.创建工程，导入zTree的css文件和js文件

在这里插入图片描述

4.编写zTree的小案例

<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2020/12/9
  Time: 15:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">        <%--引入zTree的css文件，需要注意要写（rel="stylesheet"）表示导入外部文件--%>
    <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="js/jquery.ztree.core.js" type="text/javascript"></script>              <%--引入zTree的核心文件--%>
    <script src="js/jquery.ztree.excheck.js" type="text/javascript"></script>           <%--引入zTree的扩展文件--%>

    <script type="text/javascript">
        var zTreeObj;
        // zTree的参数配置，功能和样式的设置
        var setting={
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId",
                    rootPId: 0
                }
            }
        };
        // zTree的数据属性。
        var zTreeNodes=[
            { id:1, pId:0, name:"文件夹-1", open:true},
            { id:11, pId:1, name:"文件夹-1.1", open:true},
            { id:111, pId:11, name:"文件夹-1.1.1"},
            { id:112, pId:11, name:"文件夹-1.1.2"},
            { id:12, pId:1, name:"文件夹-1.2", open:true},
            { id:121, pId:12, name:"文件夹-1.2.1"},
            { id:122, pId:12, name:"文件夹-1.1.2"},
            { id:2, pId:0, name:"文件夹-2", open:true},
            { id:21, pId:2, name:"文件夹-2.1"},
            { id:22, pId:2, name:"文件夹-2.2", open:true},
            { id:221, pId:22, name:"文件夹-2.2.1"},
            { id:222, pId:22, name:"文件夹-2.2.2"},
            { id:23, pId:2, name:"文件夹-2.3"}
        ];
        $(function () {
            zTreeObj= $.fn.zTree.init($("#zTreeDemo"),setting,zTreeNodes);
        });
    </script>
</head>
<body>
    <ul id="zTreeDemo" class="ztree"></ul>
</body>
</html>

运行效果：

在这里插入图片描述

总结

zTree创建树的编写步骤：
1.在页面中导入两个js文件和一个css文件

link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">        
    <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="js/jquery.ztree.core.js" type="text/javascript"></script>              
    <script src="js/jquery.ztree.excheck.js" type="text/javascript"></script>

2.页面上必须要有zTree树的容器（注：class="ztree"的容器就是树的容器）

<ul id="zTreeDemo" class="ztree"></ul>

3.调用zTree的初始化函数创建树
3.1设置创建zTree所需要的参数——setting

var setting={
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId",
                    rootPId: 0
                }
            }
        };

3.2设置创建zTree所需要的参数——zTreeNodes

var zTreeNodes=[
            { id:1, pId:0, name:"文件夹-1", open:true},
            { id:11, pId:1, name:"文件夹-1.1", open:true},
            { id:111, pId:11, name:"文件夹-1.1.1"},
            { id:112, pId:11, name:"文件夹-1.1.2"},
            { id:12, pId:1, name:"文件夹-1.2", open:true},
            { id:121, pId:12, name:"文件夹-1.2.1"},
            { id:122, pId:12, name:"文件夹-1.1.2"},
            { id:2, pId:0, name:"文件夹-2", open:true},
            { id:21, pId:2, name:"文件夹-2.1"},
            { id:22, pId:2, name:"文件夹-2.2", open:true},
            { id:221, pId:22, name:"文件夹-2.2.1"},
            { id:222, pId:22, name:"文件夹-2.2.2"},
            { id:23, pId:2, name:"文件夹-2.3"}
        ];

3.3调用初始化方法创建树

zTreeObj= $.fn.zTree.init($("#zTreeDemo"),setting,zTreeNodes);

LUSHIJIE__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
zTree学习-1

系列文章目录文章目录系列文章目录一、zTree 简介二、使用步骤1.下载zTree2.zTree下载后的文件夹分析3.创建工程，导入zTree的css文件和js文件4.编写zTree的小案例运行效果：一、zTree 简介zTree 是一个依靠 jQuery 实现的多功能 “树插件”。二、使用步骤1.下载zTree链接：点击链接下载zTree2.zTree下载后的文件夹分析3.创建工程，导入zTree的css文件和js文件4.编写zTree的小案例<%-- Created
复制链接

扫一扫