1、想要使用zTree的话，就应当要有相应的支持文件，如你要使用jdbc的话需要引入mysql或oracle的jar是一个意思，那么我们可以在网上搜索找到它的网站，去下载相应的zip包，然后解压得到下面的目录:
2、拿到了上面的文件之后，我们就可以新建一个jsp页面来测试了。建好jsp之后，在head标签中引入最基本的五个文件，如下图所示，需要注意的是，引入路径要写你自己的文件路径，勿照搬我案例上的。比如我的文件是放在项目的ztree文件夹下，所以下图是我的引入文件路径
1、 上面的步骤，已经将需要的材料准备好了，接下来就是进入真正的编写，在head标签中写入如下代码：
<script type="text/javascript">
var zTreeObj;
var setting = {};
var zNodes = [
{name:"test1",children:[
{name:"test1_1"}, {name:"test1_2"}]},
{name:"test2",children:[
{name:"test2_1"}, {name:"test2_2"}]}
];
$(document).ready(function(){
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
</script>
在body中写入如下代码：
<div>
<ul id="treeDemo" class="ztree"></ul>
</div>
这段代码一眼看过去可能不好理解，我解释一下，其实很简单的，起关键作用的是下面这一行，能够进行一个完整文件树图形的初始化，
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
其中的 treeDemo 字符串就是一个ul的id，表示要把这个文件树生成在这个div中，setting和zNodes是我们要配置的两个总参数，现在我们暂时不用setting，然后就只要看zNodes，它里面填写的就是文件夹的名称和文件的名称，其实看看下面的图片就一下明白了。
2、下面将完整的代码复制一份吧，大家复制比较方便：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="/nxitv-admin/ztree/zTree_v3-master/css/demo.css" type="text/css">
<link rel="stylesheet" href="/nxitv-admin/ztree/zTree_v3-master/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="/nxitv-admin/ztree/zTree_v3-master/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/nxitv-admin/ztree/zTree_v3-master/js/jquery.ztree.core-3.4.js"></script>
<script type="text/javascript" src="/nxitv-admin/ztree/zTree_v3-master/js/jquery.ztree.core-3.4.js"></script>
<script type="text/javascript">
var zTreeObj;
var setting = {};
var zNodes = [
{name:"文件夹一",children:[
{name:"子文件1"}, {name:"子文件2"}]},
{name:"文件夹二",children:[
{name:"子文件1"}, {name:"子文件2"}]}
];
$(document).ready(function(){
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
</script>
</head>
<body class="fixed-top">
<div>
<ul id="treeDemo" class="ztree"></ul>
</div>
</body>
</html>
1、 小伙伴们，以上就是一个详细的入门zTree插件的编写了，你会了吗？我会在接下去继续一步步讲解相关的zTree内容，如果有疑问可以留言哦，需要看其他知识可以查看我其他文章，希望能帮到正在学习java的您，同时您如果觉得我写的不错的话，希望您能动动小拇指为我投票点个赞，给予我继续总结经验的动力！
