jsp/servlet使用ajax動態載入dtree， dtree樣式/圖片修改 （java 產生dtree servlet json）__js

FROM：http://www.cnblogs.com/kenkofox/archive/2011/03/28/1997638.html

（。。。在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