zTree之最简单动态树

最新推荐文章于 2018-04-19 16:43:58 发布

loveshuang1227

最新推荐文章于 2018-04-19 16:43:58 发布

阅读量194

点赞数

分类专栏： JQuery 文章标签： java json javascript ViewUI

本文链接：https://blog.csdn.net/loveshuang1227/article/details/84407302

版权

JQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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();

	}
	
}

loveshuang1227

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
zTree之最简单动态树

1. 标准的JSON格式数据：JSP代码： &lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt;&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;&lt;html&gt; &
复制链接

扫一扫