`

zTree之最简单动态树

 
阅读更多

1. 标准的JSON格式数据：

JSP代码：

 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>

		<title>zTree Test Page</title>

		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<link rel="stylesheet" href="zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
		<script type="text/javascript" src="zTree/js/jquery-1.4.4.min.js"></script>
		<script type="text/javascript" src="zTree/js/jquery.ztree.core-3.3.js"></script>
		<script type="text/javascript" src="zTree/js/jquery.ztree.excheck-3.3.js"></script>
		<script type="text/javascript" src="zTree/js/jquery.ztree.exhide-3.3.js"></script>

		<script type="text/javascript">
	var setting = {
		view : {
			selectedMulti : false
		},
		async : {
			enable : true,
			//请求的URL
			url : "getDataServlet",
			//默认值，可不写
			dataType: "text",
			//异步加载时需要自动提交父节点属性的参数
			autoParam : ["id", "name"],
			//Ajax 请求提交的静态参数键值对
			otherParam : {
				"otherParam" : "zTreeAsyncTest"
			}
		}
		
	};
	
	$(document).ready(function() {
		$.fn.zTree.init($("#zTree"), setting);
	});
</script>
	</head>

	<body>
		<table width="300" border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td>
					<div id="zTree" class="ztree">
					</div>
				</td>
			</tr>
		</table>
	</body>
</html>

 Servlet代码：

 

/**
 * @(#) ZtreeGetData.java Created on 2012-9-6
 *
 * Copyright (c) 2012 Exception. All Rights Reserved
 */
package com.lipw.servlet.ztree;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * The class <code>ZtreeGetData</code>
 * 
 * @author lipw
 * @version 1.0
 */
public class ZtreeGetDataServlet extends HttpServlet {

	private static final long serialVersionUID = 5386326172054091738L;

	/*
	 * (non-Javadoc)
	 * 
	 * @see
	 * javax.servlet.http.HttpServlet#service(javax.servlet.http.HttpServletRequest
	 * , javax.servlet.http.HttpServletResponse)
	 */
	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		resp.setContentType("text/xml;charset=utf-8");
		String id = req.getParameter("id");
		String name = req.getParameter("name");
		String otherValue = req.getParameter("otherParam");
		System.out.println("id----->" + id);
		System.out.println("name----->" + name);
		System.out.println("otherValue----->" + otherValue);
		resp.getWriter().write(getStandardJSONData());
	}

	/**
	 * 获取标准的JSON数据
	 * @return
	 */
	private String getStandardJSONData(){
		StringBuffer sb = new StringBuffer();
		sb.append("[");
		sb.append("{ id:1, name:'部门管理',children:[");
		sb.append("{ id:11, name:'部门增加',children:[");
		sb.append("{ id:111, name:'部门删除'},");
		sb.append("{ id:112, name:'部门修改'}]");
		sb.append("}]}]");
		return sb.toString();
	}
	
}

 

2. SimpleData

JSP代码：

 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>

		<title>zTree Test Page</title>

		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<link rel="stylesheet" href="zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
		<script type="text/javascript" src="zTree/js/jquery-1.4.4.min.js"></script>
		<script type="text/javascript" src="zTree/js/jquery.ztree.core-3.3.js"></script>
		<script type="text/javascript" src="zTree/js/jquery.ztree.excheck-3.3.js"></script>
		<script type="text/javascript" src="zTree/js/jquery.ztree.exhide-3.3.js"></script>

		<script type="text/javascript">
	var setting = {
		view : {
			selectedMulti : false
		},
		async : {
			enable : true,
			//请求的URL
			url : "getDataServlet",
			//默认值，可不写
			dataType: "text",
			//异步加载时需要自动提交父节点属性的参数
			autoParam : ["id", "name"],
			//Ajax 请求提交的静态参数键值对
			otherParam : {
				"otherParam" : "zTreeAsyncTest"
			}
		},
		data: {
			simpleData: {
				enable: true,
				idKey: "id",
				pIdKey: "pId",
				rootPId: 0
		       }
	       }
		
	};
	
	$(document).ready(function() {
		$.fn.zTree.init($("#zTree"), setting);
	});
</script>
	</head>

	<body>
		<table width="300" border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td>
					<div id="zTree" class="ztree">
					</div>
				</td>
			</tr>
		</table>
	</body>
</html>

 Servlet代码：

 

 

/**
 * @(#) ZtreeGetData.java Created on 2012-9-6
 *
 * Copyright (c) 2012 Exception. All Rights Reserved
 */
package com.lipw.servlet.ztree;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * The class <code>ZtreeGetData</code>
 * 
 * @author lipw
 * @version 1.0
 */
public class ZtreeGetDataServlet extends HttpServlet {

	private static final long serialVersionUID = 5386326172054091738L;

	/*
	 * (non-Javadoc)
	 * 
	 * @see
	 * javax.servlet.http.HttpServlet#service(javax.servlet.http.HttpServletRequest
	 * , javax.servlet.http.HttpServletResponse)
	 */
	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		// 获得通信参数
		resp.setContentType("text/xml;charset=utf-8");
		String id = req.getParameter("id");
		String name = req.getParameter("name");
		String otherValue = req.getParameter("otherParam");
		System.out.println("id----->" + id);
		System.out.println("name----->" + name);
		System.out.println("otherValue----->" + otherValue);
		resp.getWriter().write(getSimpleData());
	}
	/**
	 * 简单的JSON数据
	 * Ztree需要配置
	 * data: {
			simpleData: {
				enable: true,
				idKey: "id",
				pIdKey: "pId",
				rootPId: 0
		}
	 * @return
	 */
	private String getSimpleData() {
		StringBuffer sb = new StringBuffer();
		sb.append("[");
		sb.append("{ id:1, pId:0, name:'部门管理'},");
		sb.append("{ id:11, pId:1, name:'部门增加'},");
		sb.append("{ id:111, pId:11, name:'部门删除'},");
		sb.append("{ id:112, pId:11, name:'部门修改'}");
		sb.append("]");
		return sb.toString();

	}
	
}

 
  • 大小: 1.9 KB
分享到：
基于ZTree的过滤树
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ztree最简单的树--标准JSON 数据

    标题"ztree最简单的树--标准JSON 数据"暗示我们将讨论如何用标准的JSON格式来构建ZTree的节点数据。 ZTree的核心在于其`setting`配置和`treeNode`节点数据。接下来，我们将详细解释这两个关键部分。 1. **setting ...

    ztree最简单的后台传前台例子

    本案例“ztree最简单的后台传前台例子”旨在帮助初学者理解如何使用ZTree与后台进行数据交换，通过Servlet作为中间桥梁，结合FastJSON进行数据的序列化和反序列化。 首先，ZTree本身是一个基于jQuery的插件，它提供...

    最简单zTree的使用

    在本案例中，我们将探讨如何在MyEclipse环境中最简单地使用zTree。首先，确保你已安装了MyEclipse集成开发环境，并且熟悉基本的HTML、CSS和JavaScript编程。 1. **引入zTree库** 在项目中，你需要下载zTree的最新...

    ztree+jstree最简单htm实例

    在本实例中，"ztree+jstree最简单htm实例"可能是将这两个插件的功能结合在一起，展示如何在一个页面上同时使用ztree和jstree。开发者可能通过比较和对比，学习它们在实现上的异同，选择更适合项目需求的树形插件。...

    ajax+zTree 文件树

    总结，Ajax和zTree的结合，为构建动态文件树提供了强大的工具。通过理解并熟练运用这两个技术，开发者可以轻松创建出交互性强、用户体验优良的文件管理界面。在使用过程中，根据具体需求调整zTree的设置和`...

    jQuery-zTree树插件demo.zip

    它提供了丰富的功能，包括但不限于动态加载、节点拖放、自定义图标、异步操作等，使得在网页中构建复杂的树形结构变得轻松简单。 一、zTree基本概念与特点 1. 基本概念：zTree是基于jQuery的树形控件，通过JSON...

    实现ztree树形的js和css

    在IT行业中，ZTree是一款非常流行的JavaScript库，用于创建交互式的树形结构，常用于网站导航、文件管理、权限控制等场景。它结合了JavaScript和CSS，提供了丰富的配置选项和功能，如多选、单选、部分选以及全选功能...

    ssm项目结合zTree实现异步加载树。

    在SSM项目中结合zTree实现异步加载树，可以使得前端界面更加动态和灵活。 首先，我们需要在项目中引入zTree的CSS和JavaScript文件，这些通常可以从zTree的官方网站或者通过npm、yarn等包管理工具获取。然后在HTML...

    ztree官网参考文档及demo

    zTree是一个基于jQuery的树形插件，它能够快速构建出各种类型的树形结构，如文件目录树、组织架构树等。zTree提供了多种数据格式支持，包括JSON、XML等，使得数据处理更加便捷。同时，zTree具备强大的事件机制和API...

    ztree与nutz简单使用

    首先，ZTree的核心在于它的树形结构展示方式，这种结构清晰直观，特别适合展示层次分明的目录系统。用户可以通过点击节点来展开或折叠目录，同时，ZTree还支持文件的上传、下载、重命名、删除等操作，大大简化了文件...

    Ztree增删改查

    添加节点是ZTree最基础的操作之一，可以分为两种情况：动态加载和异步加载。在动态加载模式下，所有节点数据都在初始化时一次性加载，而异步加载则根据需要逐级获取。添加节点通常涉及以下步骤： 1. **初始化ZTree*...

    JQuery zTree 2.0 一个非常好用的jQuery树插件

    1. **基本用法**：展示了最简单的树形结构，包括节点的基本操作。 2. **异步加载**：演示了如何动态加载子节点，适用于数据量庞大的情况。 3. **自定义图标**：说明如何通过CSS或图片为节点设置个性化图标。 4. **...

    ZTree 异步加载 SSH JSON

    ZTree是一款基于jQuery的树形插件，它具有丰富的功能和良好的可扩展性，常用于构建网站的导航菜单、文件目录展示等场景。在"ZTree 异步加载 SSH JSON"这个主题中，我们将深入探讨如何利用ZTree实现异步加载数据，并...

    JQuery zTree v3.1

    zTree的核心特性在于其轻量级、高效且易于使用，为开发者提供了灵活的接口和丰富的API，使得创建和操作树形结构变得简单。 ### 一、主要特点 1. **动态加载**：zTree支持根据需要动态加载子节点，降低了页面初次...

    zTree v3(附demo)

    - **基本展示**：展示最简单的树形结构，节点仅包含文字信息。 - **多选模式**：允许用户通过复选框选择多个节点。 - **异步加载**：在用户展开节点时动态加载子节点数据，节省初次加载时间。 - **拖拽排序**：...

    jQuery zTree插件快速实现目录树

    通过以上步骤，我们便能成功地使用jQuery zTree插件快速实现一个具有动态数据加载、编辑功能的目录树。在实际应用中，还可以根据需求进一步定制zTree的功能，例如节点的展开收起、异步加载数据、节点拖拽等。同时，...

    jQuery zTree v3.5.15 api

    1. **基本展示**：展示了zTree最基础的树结构，包括单击节点、展开/折叠节点等功能。 2. **数据加载**：包括静态数据加载和动态异步加载，帮助开发者了解如何将数据与zTree结合。 3. **节点操作**：如添加、删除、...

    ztree demo

    最后，zTree的皮肤定制也是其亮点之一。通过简单的CSS样式修改，开发者可以轻松地调整zTree的外观，使其融入到各种网页设计中。在"ztree demo"中，我们可以看到预设的皮肤效果，同时也可以学习如何根据项目需求进行...

    bootstrap样式的jquery-ztree

    Bootstrap是目前最流行的前端框架之一，它的UI组件简洁且响应式。将jQuery-zTree与Bootstrap整合，主要涉及以下几个方面： 1. CSS样式调整：将zTree的默认CSS替换为Bootstrap的样式，包括字体、颜色、边框等，使其...

    zTree结构扩展,实现动态添加

    首先，zTree的基础是JSON数据格式，通过JavaScript动态生成树节点。在"modeContent.js"文件中，我们可能看到用于处理这些JSON数据和与服务器交互的JavaScript代码。为了实现动态添加，我们需要定义一个函数，该函数...

Magicbox
Global site tag (gtag.js) - Google Analytics