struts2+DOJO构造动态树

最新推荐文章于 2021-02-19 17:00:23 发布

liaoxueli

最新推荐文章于 2021-02-19 17:00:23 发布

阅读量110

点赞数

分类专栏： Dojo 文章标签： Dojo Ajax freemarker json Struts

本文链接：https://blog.csdn.net/liaoxueli/article/details/83267262

版权

Dojo 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Dojo 通过名为“TreeRPCController”的控件实现 AJAX 树，它会监听被控制树的事件。当发生展开节点的事件时，TreeRPCController就会向URL发送XHR请求，该URL由TreeRPCController的RPCUrl 属性定义。XHR请求格式类似如下格式：

http://localhost:8080/Struts2_Ajax2/AjaxTree.action?action=getChildren&data={"node":{"widgetId":"file_226092423","objectId":"C:\\Program Files\\Tomcat 5.5\\webapps\\Struts2_Ajax2","index":0,"isFolder":true},"tree":{"widgetId":"appFiles","objectId":""}}&dojo.preventCache=1182913465392

清单5 XHR样本
显而易见，请求中包含三个参数，分别是action为“getChildren”（固定值），data一个包含当前节点与树信息的JSON串和dojo.preventCache随机串，用于缓存不同节点的请求响应（父节点只会在第一次被展开时到服务器端加载数据，之后都是从浏览器的缓存中读取数据，可以提高应用程序性能）。

首先我要先写一个加载树节点数据的Action类，代码如下：

package tutorial;

import java.util.Map;

import com.googlecode.jsonplugin.JSONExeption;
import com.googlecode.jsonplugin.JSONUtil;

public class AjaxTreeAction extends DynamicTreeAction {
    private static final long serialVersionUID = 3970019751740942311L;

    private String action;
    private String data;
    private FileWrapper[] wrappers;

    public void setAction(String action) {
        this.action = action;
    }

    public void setData(String data) {
        this.data = data;
    }

    public FileWrapper[] getWrappers() {
        return wrappers;
    }

    @Override
    public String execute() {
        if("getChildren".equals(action)) {
            try {
                Object o = JSONUtil.deserialize(data);
                String path = ((Map) ((Map) o).get("node")).get("objectId").toString();
                wrappers = new FileWrapper(path).getChildren();
            } catch (JSONExeption e) {
                e.printStackTrace();
            }
            return "ajax";
        }    
        return super.execute();
    }
}

清单6 src/tutorial/AjaxTreeAction.java
上述代码可能需要解释一下：

action属性对应于XHR中的action，如果它为“getChildren”时，则需要进行加载子节点操作。否则，会读取树的根节点，并返回JSP页面；
通过上面XHR的分析，大家可以知道data是代表树和当前节点的JSON串，故应将其反串行化为Map对象，并将其 objectId属性取出。通常情况下，Dojo树的objectId属性代表服务器端的对象的标识，在本例中为文件夹的绝对路径；
wrappers属性表示当前文件夹下的文件数组，它被传送到Freemarker页面，翻译为Dojo树节点数组的JSON串。
下面是Freemarker页面的代码：

[
<#list wrappers as r>
    { "title": "${r.name}", "isFolder": <#if r.children?size gt 0>true<#else>false</#if>, "id": "${r.id}", "objectId": "${r.absolutePath?js_string}" }<#if r_has_next>,</#if>
</#list>

]清单7 WebContent/AjaxTree.ftl
以上代码中<#list></#lsit>的写法是Freemarker中遍历集合的写法；而<#if r.children?size gt 0>判断“r”对象的children属性是否为空；r.absolutePath?js_string 就是将“r”的absolutePath属性的值输出为Javascript 的字串符形式；<#if r_has_next></#if>判断集合是否有下一项数据。如果希望更详细地了解Freemarker的使用，请参考该手册。

接下来，让我们看看Action的配置代码片段：

 <action name="AjaxTree" class="tutorial.AjaxTreeAction">
            <result>AjaxTree.jsp</result>
            <result name="ajax" type="freemarker">AjaxTree.ftl</result>
        </action>

清单8 src/struts.xml配置片段
最后是JSP页面代码：

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Struts 2 AJAX - More Tree</title>
        <s:head theme="ajax" debug="true" />
        <script type="text/javascript">
        /* <![CDATA[ */
            function treeNodeSelected(arg) {
                alert(arg.source.title + ' selected');
            }

            dojo.addOnLoad(function() {                
                var t = dojo.widget.byId('appFiles');                
                var s = t.selector;                
                dojo.event.connect(s, 'select', 'treeNodeSelected');
            });    
        /* ]]> */    
        </script>
    </head>
    <body>
        <h2>
            AJAX Tree Example
        </h2>
        <div style="float:left; margin-right: 50px;">
            <script type="text/javascript">
            /* <![CDATA[ */
                dojo.require("dojo.lang.*");
                dojo.require("dojo.widget.*");
                dojo.require("dojo.widget.Tree");
                dojo.require("dojo.widget.TreeRPCController");                
             /* ]]> */
             </script>             
            <div dojoType="TreeRPCController" widgetId="treeController"
                DNDcontroller="create" RPCUrl="<s:url />"></div>
            <div dojoType="Tree" widgetId="appFiles" toggle="fade" controller="treeController">
                <div dojoType="TreeNode" title='<s:property value="root.name" />'
                    widgetId='<s:property value="root.id" />'
                    isFolder='<s:property value="root.children.length > 0" />'
                    objectId='<s:property value="root.absolutePath" />'>
                </div>
            </div>
        </div>
    </body>
</html>