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
扫一扫
603
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
