這個樹是用zTree這個插件搞定的！代碼如下
頁面代碼：
Jsp代碼
<%@ page language="java" pageEncoding="UTF-8"%>
<%
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="zTree/demoStyle/demo.css" type="text/css">
<link rel="stylesheet" href="zTree/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="zTree/jquery-1.4.2.js"></script>
<script type="text/javascript" src="zTree/jquery.ztree-2.6.js"></script>
<SCRIPT LANGUAGE="JavaScript">
var zTree1;
var setting = {
checkable: false,
async: true,
asyncUrl: "Tree", //獲取節點數據的URL地址
asyncParam: ["name", "id"], //獲取節點數據時，必須的數據名稱，例如：id、name
asyncParamOther: ["test","true"] , //其它參數 ( key, value 鍵值對格式)
callback : {
click: function (event, treeId, treeNode){
// zTree1.expandNode(treeNode, true, false);
} ,
expand : function (event, treeId, treeNode){
},
collapse:function (event, treeId, treeNode){
}
}
};
function refreshTree() {
zTree1 = $("#treeDemo").zTree(setting );
}
$(document).ready(function(){
refreshTree();
});
</SCRIPT>
</HEAD>
<BODY>
<ul id="treeDemo" class="tree" style="height:500px;width:300px;"></ul>
</BODY>
</HTML>
<%@ page language="java" pageEncoding="UTF-8"%>
<%
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="zTree/demoStyle/demo.css" type="text/css">
<link rel="stylesheet" href="zTree/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="zTree/jquery-1.4.2.js"></script>
<script type="text/javascript" src="zTree/jquery.ztree-2.6.js"></script>
<SCRIPT LANGUAGE="JavaScript">
var zTree1;
var setting = {
checkable: false,
async: true,
asyncUrl: "Tree", //獲取節點數據的URL地址
asyncParam: ["name", "id"], //獲取節點數據時，必須的數據名稱，例如：id、name
asyncParamOther: ["test","true"] , //其它參數 ( key, value 鍵值對格式)
callback : {
click: function (event, treeId, treeNode){
// zTree1.expandNode(treeNode, true, false);
} ,
expand : function (event, treeId, treeNode){
},
collapse:function (event, treeId, treeNode){
}
}
};
function refreshTree() {
zTree1 = $("#treeDemo").zTree(setting );
}
$(document).ready(function(){
refreshTree();
});
</SCRIPT>
</HEAD>
<BODY>
<ul id="treeDemo" class="tree" style="height:500px;width:300px;"></ul>
</BODY>
</HTML>
java代碼：
Java代碼
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;
@SuppressWarnings("serial")
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 {
try {
String pId = request.getParameter("id");
String pName = request.getParameter("name");
//延遲，讓loading 顯示出來
for (int i = 0; i < 9999; i++) { }
//構造數據，可以從數據庫中查詢
String str = "[" ;
if (pId == null || pName == null){
pId = "0";
pName = "";
str += "{'id':'root','name':'根節點','icon':'"+request.getContextPath()+"/zTree/logout.jpg','isParent':true},";
}else {
for (int i = 1; i < 3 ; i++) {
String nId = pId + i;
String nName = nId;
str += "{'id':'"+nId + "','name':'"+nName + "','icon':''" + ",'isParent':" + (i % 2 == 0 ? false:true) + "},";
}
}
str = str.substring(0,str.length()-1) + "]";
reponse(request,response,str );
} catch (Exception e) {
e.printStackTrace();
}
}
public void reponse(HttpServletRequest request, HttpServletResponse response,Object msg) throws Exception{
response.setContentType("text/plain");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
out.write(msg.toString());
out.flush();
out.close();
}
}
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;
@SuppressWarnings("serial")
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 {
try {
String pId = request.getParameter("id");
String pName = request.getParameter("name");
//延遲，讓loading 顯示出來
for (int i = 0; i < 9999; i++) { }
//構造數據，可以從數據庫中查詢
String str = "[" ;
if (pId == null || pName == null){
pId = "0";
pName = "";
str += "{'id':'root','name':'根節點','icon':'"+request.getContextPath()+"/zTree/logout.jpg','isParent':true},";
}else {
for (int i = 1; i < 3 ; i++) {
String nId = pId + i;
String nName = nId;
str += "{'id':'"+nId + "','name':'"+nName + "','icon':''" + ",'isParent':" + (i % 2 == 0 ? false:true) + "},";
}
}
str = str.substring(0,str.length()-1) + "]";
reponse(request,response,str );
} catch (Exception e) {
e.printStackTrace();
}
}
public void reponse(HttpServletRequest request, HttpServletResponse response,Object msg) throws Exception{
response.setContentType("text/plain");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
out.write(msg.toString());
out.flush();
out.close();
}
}
這篇博客是因為以為網友提出的，所以就做瞭這個demo，這個也是根據zTree例子中的一個改寫的，同志們如果這個插件感興趣，可以仔細閱讀源碼、例子和api文檔！
作者“80後的辛酸”