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();
        }
    }