jQuery 动态加载树
本案例中用到了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();
}
}
