本案例中用到了jquery的 tree插件,在本文的附件中可以下载
jsp代码:
<%@ page language="java" import="java.util.*"
pageEncoding="ISO-8859-1"%>
<%
String path =
request.getContextPath();
String basePath =
request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<base
href="<%=basePath%>">
<title>jQuery Tree
</title>
<link rel="stylesheet"
href="css/tree/jquery.treeview.css" />
<link
rel="stylesheet" href="css/tree/red-treeview.css" />
<link rel="stylesheet" href="css/tree/screen.css"
/>
<script type="text/javascript"
src="js/jquery.js"></script>
<script
type="text/javascript"
src="js/tree/jquery.cookie.js"></script>
<script type="text/javascript"
src="js/tree/jquery.treeview.js"></script>
<script type="text/javascript"
src="js/tree/jquery.treeview.async.js"></script>
<script type="text/javascript">
function initTrees() {
$("#mixed").treeview({
url: "Tree",
ajax: {
data: {
"additional": function() {
return "yeah: " + new Date;
}
},
type: "post"
}
});
}
$(document).ready(function(){
initTrees();
$("#refresh").click(function() {
$("#mixed").empty();
initTrees();
});
});
</script>
</head>
<body>
<ul id="mixed">
</ul>
<button
id="refresh">Refresh both
Trees</button>
</body>
</html>
=-=====================
java代码:本人用的是 servlet
package com;
import java.io.IOException;
import
java.io.PrintWriter;
import javax.servlet.ServletException;
import
javax.servlet.http.HttpServlet;
import
javax.servlet.http.HttpServletRequest;
import
javax.servlet.http.HttpServletResponse;
public class Tree extends
HttpServlet {
public void doGet(HttpServletRequest
request, HttpServletResponse response)
throws ServletException, IOException
{
this.doPost(request,
response);
}
public void
doPost(HttpServletRequest request, HttpServletResponse
response)
throws
ServletException, IOException {
response.setContentType("text/plain");
response.setCharacterEncoding("UTF-8");
PrintWriter out =
response.getWriter();
String
re = "[{‘text‘:‘root‘,‘expanded‘:false,‘children‘:[{‘text‘:‘1.1 jQuery
core‘},{‘text‘:‘1.2 my jQuery Tree‘}]}"
+
",{‘text‘:‘2 hhh‘},{‘text‘:‘3 xxx‘}]";
out.flush();
System.out.println(re);
out.write(re);
out.close();
}
}
- JQuery.rar (53.6
KB)