zoukankan      html  css  js  c++  java
  • 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();
            }
        }
    kenkofox@qq.com https://github.com/kenkozheng 欢迎投简历给我,一线大厂工作机会
  • 相关阅读:
    HTML5简介
    PHP
    纯CSS3写的10个不同的酷炫图片遮罩层效果
    零基础如何自学MySQL数据库?
    js与jQuery
    MAC下GitHub命令操作
    框架基础:ajax设计方案(二)---集成轮询技术
    框架基础:ajax设计方案(一)---集成核心请求
    框架基础:ajax设计方案(三)---集成ajax上传技术
    Jquery操作下拉列表和复选框,自定义下拉
  • 原文地址:https://www.cnblogs.com/kenkofox/p/1997638.html
Copyright © 2011-2022 走看看