欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

refreshTree的getJson不刷新的问题

程序员文章站 2022-06-13 17:11:35
...

最近要做树,用dtree+ajax来实现,结果半天也弄不出来。碰到两个问题:

1、dtree+ajax不刷新

   直接用例子程序来做一个静态的树,节点都是自己写的,但是放在getJson里面不能刷新,+号点击没有反应,找了半天,终于找到问题了:

            doucument.write(b);

要写成

           $("#treeDiv").html(tree.toString());

下面给一个整体的实例。

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

refreshTree的getJson不刷新的问题
            
    
    博客分类: dtree在getJson里面不刷新的问题转