您的位置首页生活百科

zTree -- jQuery 树插件如何使用

zTree -- jQuery 树插件如何使用

的有关信息介绍如下:

zTree -- jQuery 树插件如何使用

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。使用它能够创建出多级树状的文件夹与文件,今天这篇文章就来详细讲解如何操作来对zTree进行一个入门。

想要使用zTree的话,就应当要有相应的支持文件,如你要使用jdbc的话需要引入mysql或oracle的jar是一个意思,那么我们可以在网上搜索找到它的网站,去下载相应的zip包,然后解压得到下面的目录:

拿到了上面的文件之后,我们就可以新建一个jsp页面来测试了。建好jsp之后,在head标签中引入最基本的五个文件,如下图所示,需要注意的是,引入路径要写你自己的文件路径,勿照搬我案例上的。比如我的文件是放在项目的ztree文件夹下,所以下图是我的引入文件路径

上面的步骤,已经将需要的材料准备好了,接下来就是进入真正的编写,在head标签中写入如下代码:

在body中写入如下代码:

    这段代码一眼看过去可能不好理解,我解释一下,其实很简单的,起关键作用的是下面这一行,能够进行一个完整文件树图形的初始化,

    zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);

    其中的 treeDemo 字符串就是一个ul的id,表示要把这个文件树生成在这个div中,setting和zNodes是我们要配置的两个总参数,现在我们暂时不用setting,然后就只要看zNodes,它里面填写的就是文件夹的名称和文件的名称,其实看看下面的图片就一下明白了。

    下面将完整的代码复制一份吧,大家复制比较方便:

    <%@ 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+"/";

    %>

      小伙伴们,以上就是一个详细的入门zTree插件的编写了,你会了吗?我会在接下去继续一步步讲解相关的zTree内容,如果有疑问可以留言哦,需要看其他知识可以查看我其他文章,希望能帮到正在学习java的您,同时您如果觉得我写的不错的话,希望您能动动小拇指为我投票点个赞,给予我继续总结经验的动力!