Jquery zTree演示程序Demo总结

本文介绍了Jquery zTree的演示程序Demo,提供了下载地址http://www.ztree.me/hunter/zTree.html,同时提到了index.jsp的关键代码,并分享了项目源代码的下载链接:http://download.csdn.net/detail/nuptboyzhb/6347025。
摘要由CSDN通过智能技术生成
前言:
最近的项目需要用到zTree树,于是想将zTree树总结一下。前段时间一直没有时间总结,趁国庆还有这么点时间,总结一下。zTree树控件是基于Jquery的,官方提供了很好的API文档和Demo

用户可以从如下地址下载:http://www.ztree.me/hunter/zTree.html

1.帮助文档和API
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树的功能,布局大致如下,左边是树行结构,右边是主页面。

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
  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值