首先下載dtree：
去dtree主頁下載：http://destroydrop.com/javascripts/tree/ 或者到：http://download.csdn.net/download/maojycom/8730069這裏下載。
下載完後解壓到項目中去。
在項目代碼中引入相關的css、js文件。
如下代碼所示，這裏修改了dtree.js作爲擴展自己需要的功能。
<span style="font-size:18px;"> <link rel="stylesheet" href="dtree.css" type="text/css"></link>
<script type="text/javascript" src="jquery_js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="dtree.js"></script>
<script type="text/javascript">
dTree.prototype.getChildren = function(pid){
var tree=this;
//console.log("pid:"+pid);
var jsonstr={"pId":pid};
$.ajax({
url:urlto,
type:"post",
data:jsonstr,
dataType:"json",
success:function(data){
//根目錄
tree.add(0,-1,"總的根目錄",'','','','',"false");
for(var i=0;i<data.length;i++){
//console.log(data);
//一級目錄
if(pid==null){
tree.add(data[i].cid,0, data[i].name,'','',"target",tree.icon.folder,'','',true,true);
//tree.getChildren(list[i].id);
tree.show();
tree.openTo(i);
}
//若不是子節點，則可展開
else if(data[i].isLeaf==1){
tree.add(data[i].cid, pid,data[i].name,'','','target',tree.icon.folder,'','',true,true);
//子節點
}else{
tree.add(data[i].cid, pid,data[i].name,'','',"target");
}
if(pid!=null){
tree.show();
tree.openTo(pid);
}
}
}
});
}
//點擊節點時跳轉查找
function target(id,name){
window.open("findDatat.action?cid="+id);
}
var basepath="<%=path%>/jsp/dtree/";
var base='<%=path%>';
var urlto=base+"/servlet/TreeInfoServlet";
//初始化，頁面加載時加載
$(function(){
d = new dTree('d',"cataTree");
d.getChildren(null);
});
</script>
<style type="text/css">
body{min-height:350px;}
</style>
</head>
<body>
<div id="cataTree" class="dtree" style=""></div>
</body></span>以下是servlet,dtree中調用它來獲取json數據：
<span style="font-size:18px;">package com.demo.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.demo.utils.JdbcUtils;
import com.demo.utils.StringUtils;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
/**
* 首頁點擊樹異步加載數據，返回json數據給前臺使用
*/
public class TreeInfoServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
Connection conn;
PreparedStatement pstm = null;
ResultSet rs = null;
/**
* 通過父級id來查找其下的子節點的集合
* @param pid
* @return jsonString
*/
public String getNodesInfo(Integer pid){
JdbcUtils jdbcUtils = new JdbcUtils();
conn = jdbcUtils.getConnection();
String sql = "select cid,pid,name,isLeaf from medclass where 1=1 and pid = ?";
String jsonString = null;
try {
pstm = conn.prepareStatement(sql);
if(pid == null){
pstm.setInt(1, 0);
}else{
pstm.setInt(1, pid);
}
rs = pstm.executeQuery();
JSONArray jsonArray = new JSONArray();
while (rs.next()) {
JSONObject jsonObject = new JSONObject();
jsonObject.put("cid", rs.getInt("cid"));
jsonObject.put("pId", rs.getString("pid"));
jsonObject.put("name", rs.getString("name"));
jsonObject.put("isLeaf", rs.getInt("isLeaf"));
jsonObject.put("isParent", rs.getInt("isLeaf"));
jsonArray.add(jsonObject);
}
jsonString = jsonArray.toJSONString();
} catch (SQLException e) {
e.printStackTrace();
} finally{
jdbcUtils.close(rs, pstm, conn);
}
return jsonString;
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
Integer pid = null;
response.setContentType("text/plain");
//response.setContentType("text/json; charset=UTF-8");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
//String pId = request.getParameter("pId");
String pId = request.getParameter("cid");
//System.out.println("id:"+pId);
if(!StringUtils.isNullStr(pId) || "0".equals(pId)){
pid = null;
}else{
pid = Integer.valueOf(pId);
}
String nodesInfo = getNodesInfo(pid);
//System.out.println("json:"+nodesInfo);
out.print(nodesInfo);
}
}
</span>至此，在前臺就可以看到一顆樹形菜單，點擊父節點可異步加載其下子節點信息。