refreshTree的getJson不刷新的问题 -

小胖vs小猪

浏览: 60591 次
性别:
来自: 长沙

最近访客更多访客>>

Kadusaffk

ysyI

hzk1994

GT1001

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2011-12 ( 7)
更多存档...

refreshTree的getJson不刷新的问题

博客分类：

dtree在getJson里面不刷新的问题
转

最近要做树，用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();
        }
    }