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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏领域驱动设计DDD实战进阶

DDD实战进阶第一波(十):开发一般业务的大健康行业直销系统(实现经销商登录仓储与逻辑)

1636
来自专栏GuZhenYin

SignalR系列续集[系列6:使用自己的连接ID]

前言 老规矩,前言~,在此先道个歉,之前的1-5对很多细节问题都讲的不是很详细,也有很多人在QQ或者博客问我一些问题 所以,特开了这个续集.. - -, 讲一些...

40210
来自专栏FreeBuf

Windows Server 2012 R2的提权过程解析

近期,我在进行一项安全评估的过程中遇到了一个麻烦。这是某个组织的一台远程桌面服务器,安装的是Windows Server 2012 R2系统,但是我手中的用户账...

40010
来自专栏熊二哥

快速入门系列--WCF--03RESTFUL服务与示例

之前介绍了基于SOAP的Web服务,接下来将介绍基于REST的轻量级的Web服务。 ? REST(Representational State Transfe...

1907
来自专栏有困难要上,没有困难创造困难也要上!

在VirtualBox上使用Bosh部署Cloud Foundry

3047
来自专栏张善友的专栏

使用RestSharp 库消费Restful Service

现在互联网上的服务接口都是Restful的,SOAP的Service已经不是主流。.NET/Mono下如何消费Restful Service呢,再也没有了方便的...

1795
来自专栏jessetalks

一不小心写了个WEB服务器

开场   Web服务器是啥玩意? 是那个托管了我的网站的机器么? No,虽然那个也是服务器,但是我们今天要说的Web服务器主要是指像IIS这样一类的,用于处理r...

3195
来自专栏hbbliyong

C#读取“我的文档”等特殊系统路径及环境变量

返回“我的文档”路径字符串 Environment.GetFolderPath(Environment.SpecialFolder.Personal) ? 本技...

3418
来自专栏程序员的SOD蜜

使用Topshelf创建自宿主的Windows服务程序

在传统的Windows服务开发过程中,需要添加一个服务安装程序,里面写安装,启动和停止服务等逻辑。现在,使用TopSelf可以简化这个过程。具体请看官网说明: ...

2175
来自专栏

Raft协议实战之Redis Sentinel的选举Leader源码解析

这可能是我看过的写的最详细的关于redis 选举的文章了, 原文链接 Raft协议是用来解决分布式系统一致性问题的协议,在很长一段时间,Paxos被认为是解决分...

5517

扫码关注云+社区