Jquery zTree演示程序Demo总结

最新推荐文章于 2020-06-30 10:04:30 发布

VIP文章莫川

最新推荐文章于 2020-06-30 10:04:30 发布

阅读量1.8w

点赞数 4

分类专栏：【java】【JavaScript】

本文链接：https://blog.csdn.net/nupt123456789/article/details/12224731

版权

前言：
最近的项目需要用到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

最低0.47元/天解锁文章

莫川

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
3
评论
Jquery zTree演示程序Demo总结

前言：最近的项目需要用到zTree树，于是想将zTree树总结一下。前段时间一直没有时间总结，趁国庆还有这么点时间，总结一下。zTree树控件是基于Jquery的，官方提供了很好的API文档和Demo用户可以从如下地址下载：http://www.ztree.me/hunter/zTree.html1.帮助文档和APIzTree的帮助文档和API都是非常全面的，只是有些Demo的
复制链接

扫一扫