jsp/servlet使用ajax动态加载dtree， dtree样式/图片修改 （java 生成dtree servlet json）
jsp/servlet使用ajax动态加载dtree， dtree样式/图片修改 （java 生成dtree servlet json）
（！！！在IE，refreshTree的
getJSON不刷新的问题，参考：http://www.cnblogs.com/kenkofox/archive/2011/04/02/2004101.html）
本来我想使用jsTree或者treeView这种jquery插件的，这些插件虽然功能很强大，但无奈，太花俏了，需要学习的配置很多。
而且对于我的应用来说，并不需要花俏的功能，例如拖拽，双击重命名，右键菜单等。
耗了2天在学习jsTree和treeView，都发现不太适合，索性用最原始的dtree，效果也不错，而且所有代码简单，能够完全掌握在自己控制之下。
废话不说了。在这里分享一下，我用ajax加载dtree的做法，后台servlet提供json格式的tree数据。这个做法应该可以用到做一个系统的导航栏上。
全部代码：ajax，servlet动态加载dtree.rar
HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF8">
<link rel="StyleSheet" href="./dtree/dtree.css" type="text/css" />
<script type="text/javascript" src="./dtree/dtree.js"></script>
<script type="text/javascript" src="./js/jquery-1.5.1.min.js"></script>
<script>
dtreePath = './dtree/'; //我在dtree.js中加了这个变量，便于调整img路径
//需要设置为dtree目录位置，底下有img目录
var tree; //tree必须为全局变量
$(document).ready(function(){
refreshTree();
});
/**
* 点击菜单的操作，在后台Servlet返回的json数据中设置了url为javascript:showFolder(dir)
*/
function showFolder(dir) {
alert(dir);
}
function refreshTree() {
//生成新的树，ajax方式获取最新tree，每个json item表示一个节点
$.getJSON('OnlineFileManagerServlet',function(data){
tree = new dTree('tree'); //参数tree，表示生成的html代码中id的标记，不影响功能
tree.add(0,-1,'网络文件夹'); //树根
//遍历JSON中的每个entry
$.each(data,function(entryIndex,entry){
tree.add(entry['id'], entry['pid'], entry['name'], entry['url']);
});
$("#treeDiv").html(tree.toString());
});
}
</script>
</head>
<body>
<div class="dtree">
<p><a href="javascript: tree.openAll();">open all</a> | <a href="javascript: tree.closeAll();">close all</a></p>
<div id="treeDiv">
</div>
</div>
</body>
</html>
Servlet：（关于json，参考：http://www.cnblogs.com/kenkofox/archive/2011/03/25/1995436.html）
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
try {
//创建json数据
JSONArray tree = new JSONArray();
JSONObject node1 = new JSONObject();
node1.put("id", "1");
node1.put("pid", "0");
node1.put("name", "金属产品检验报告");
node1.put("url", "javascript:showFolder('" + "abc" + "')");
JSONObject node2 = new JSONObject();
node2.put("id", "2");
node2.put("pid", "0");
node2.put("name", "塑料产品检验报告");
node2.put("url", "javascript:showFolder('" + "abc" + "')");
JSONObject node3 = new JSONObject();
node3.put("id", "3");
node3.put("pid", "1");
node3.put("name", "阳江海关检验报告");
node3.put("url", "javascript:showFolder('" + "abc" + "')");
JSONObject node4 = new JSONObject();
node4.put("id", "4");
node4.put("pid", "3");
node4.put("name", "检验报告abc");
node4.put("url", "javascript:showFolder('" + "abc" + "')");
JSONObject node5 = new JSONObject();
node5.put("id", "5");
node5.put("pid", "2");
node5.put("name", "检验报告2");
node5.put("url", "javascript:showFolder('" + "abc" + "')");
tree.put(node1);
tree.put(node2);
tree.put(node3);
tree.put(node4);
tree.put(node5);
out.write(tree.toString());
System.out.println(tree.toString());
} catch (JSONException ex) {
Logger.getLogger(OnlineFileManagerServlet.class.getName()).log(Level.SEVERE, null, ex);
} finally {
out.close();
}
}另外，dtree的代码比较简单，就一个js和一个css，需要修改图片的就看js代码，需要修改生成的tree样式的就修改css
protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setCharacterEncoding("UTF-8"); PrintWriter out = response.getWriter(); try { //创建json数据 JSONArray tree = new JSONArray(); JSONObject node1 = new JSONObject(); node1.put("id", "1"); node1.put("pid", "0"); node1.put("name", "金属产品检验报告"); node1.put("url", "javascript:showFolder('" + "abc" + "')"); JSONObject node2 = new JSONObject(); node2.put("id", "2"); node2.put("pid", "0"); node2.put("name", "塑料产品检验报告"); node2.put("url", "javascript:showFolder('" + "abc" + "')"); JSONObject node3 = new JSONObject(); node3.put("id", "3"); node3.put("pid", "1"); node3.put("name", "阳江海关检验报告"); node3.put("url", "javascript:showFolder('" + "abc" + "')"); JSONObject node4 = new JSONObject(); node4.put("id", "4"); node4.put("pid", "3"); node4.put("name", "检验报告abc"); node4.put("url", "javascript:showFolder('" + "abc" + "')"); JSONObject node5 = new JSONObject(); node5.put("id", "5"); node5.put("pid", "2"); node5.put("name", "检验报告2"); node5.put("url", "javascript:showFolder('" + "abc" + "')"); tree.put(node1); tree.put(node2); tree.put(node3); tree.put(node4); tree.put(node5); out.write(tree.toString()); System.out.println(tree.toString()); } catch (JSONException ex) { Logger.getLogger(OnlineFileManagerServlet.class.getName()).log(Level.SEVERE, null, ex); } finally { out.close(); } }