zTree -- jQuery 树插件如何使用
的有关信息介绍如下:zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。使用它能够创建出多级树状的文件夹与文件,今天这篇文章就来详细讲解如何操作来对zTree进行一个入门。
想要使用zTree的话,就应当要有相应的支持文件,如你要使用jdbc的话需要引入mysql或oracle的jar是一个意思,那么我们可以在网上搜索找到它的网站,去下载相应的zip包,然后解压得到下面的目录:
拿到了上面的文件之后,我们就可以新建一个jsp页面来测试了。建好jsp之后,在head标签中引入最基本的五个文件,如下图所示,需要注意的是,引入路径要写你自己的文件路径,勿照搬我案例上的。比如我的文件是放在项目的ztree文件夹下,所以下图是我的引入文件路径
上面的步骤,已经将需要的材料准备好了,接下来就是进入真正的编写,在head标签中写入如下代码:
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);
});
在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+"/";
%>
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);
});