系列文章目录
一、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);