前言:
最近的项目需要用到zTree树,于是想将zTree树总结一下。前段时间一直没有时间总结,趁国庆还有这么点时间,总结一下。zTree树控件是基于Jquery的,官方提供了很好的API文档和Demo
zTree的帮助文档和API都是非常全面的,只是有些Demo的后台是用PHP写的,因此,如果想看更加全面的Demo的话,最好将帮组文档发布到本地的Apache服务器上。
2.用一个Demo来演示Jquery zTree的功能
要点:
2.1 zTree树的数据源为JSON格式
2.2 zTree树控件的信息是通过请求url动态加载的
2.3 zTree树的onClick函数,点击树的任意一个节点后,就会调用
3.Demo演示
3.1 页面布局
为了能较为全面的演示zTree树的功能,布局大致如下,左边是树行结构,右边是主页面。
最近的项目需要用到zTree树,于是想将zTree树总结一下。前段时间一直没有时间总结,趁国庆还有这么点时间,总结一下。zTree树控件是基于Jquery的,官方提供了很好的API文档和Demo
用户可以从如下地址下载:http://www.ztree.me/hunter/zTree.html
1.帮助文档和APIzTree的帮助文档和API都是非常全面的,只是有些Demo的后台是用PHP写的,因此,如果想看更加全面的Demo的话,最好将帮组文档发布到本地的Apache服务器上。
2.用一个Demo来演示Jquery zTree的功能
要点:
2.1 zTree树的数据源为JSON格式
2.2 zTree树控件的信息是通过请求url动态加载的
2.3 zTree树的onClick函数,点击树的任意一个节点后,就会调用
3.Demo演示
3.1 页面布局
为了能较为全面的演示zTree树的功能,布局大致如下,左边是树行结构,右边是主页面。
index.jsp的代码如下:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<title>Jquery zTree</title>
<link rel="stylesheet" type="text/css" href="css/easyui.css">
<link rel="stylesheet" type="text/css" href="css/icon.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="zTree/css/zTreeStyle/zTreeStyle.css"/>
<link rel="stylesheet" type="text/css" href="zTree/css/demo.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="zTree/js/jquery.ztree.all-3.5.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body id="main" class="easyui-layout">
<div data-options="region:'west',spl