使用Dwr渲染table

第一次尝试使用Dwr来开发ajax，js也没有想像那么难写。有一个感觉，Dwr的设计很像axis1，连显示服务的风格都很像，呵呵，是不是作者使借签了axis的设计思想啊

1、设计目标

避免查询的时候刷新页面的全部区域，只用改变查询结果显示的部分

2、web.xml中部署Dwr

xml 代码

<servlet>
        <servlet-name>dwr</servlet-name>
        <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
        <init-param>
            <param-name>debug</param-name>
            <param-value>true</param-value>
        </init-param>
    </servlet>
    <servlet-mapping>
        <servlet-name>dwr</servlet-name>
        <url-pattern>/dwr/*</url-pattern>
    </servlet-mapping>

3、Dwr.xml部置

xml 代码

<dwr>
    <allow>
        <create creator="spring" javascript="FileManager">
            <param name="beanName" value="fileItemManager" />
            <include method="getFileItemsByParent" />
        </create>
        <convert match="com.csroad.fileproject.model.FileItem"
            converter="bean">
            <param name="include" value="id,name,fileType,parentId" />
        </convert>
    </allow>

</dwr>

客户端调用的是Spring代理的javabean，所有creator要使用spring，如果是普通javabean，则使用new就可以了。javascript属性指定了客户端的js名字

参数，spring中是使用beanName来获取spring中的bean。如果是普通的javabean，则使用class，值为java类

需要注意的是convert，如果传递的对象不是基本类型，则需要配置javabean，并指定相关的属性。如配置文件中的id,name

需要说明的是，fileItemManager的方法是一返回一个java.util.List对象

4、页面中插入js

js 代码

<script type='text/javascript' src='${ctx}/dwr/interface/FileManager.js'></script>

<script type='text/javascript'
    src='<%=request.getContextPath()%>/dwr/engine.js'>
</script>
<script type='text/javascript'
    src='<%=request.getContextPath()%>/dwr/util.js'></script>

 

其中${ctx}/dwr/inteface/FileManger.js的名字要和前面dwr.xml中javscript属性的值一致。

5、编写JS代码

js 代码

<script type="text/javascript">
//查询函数
function query(parentId,label,dep){
    FileManager.getFileItemsByParent(parentId,getFileList);
    DWRUtil.useLoadingMessage("文件正在载入中，请稍等...........");
 }
  //回调函数
   function getFileList(data){
   var cellfuncs=[
   function(data){
   if(data.fileType==1){
   return data.name;
   }
   var aDom=document.createElement("a");
   aDom.setAttribute("href","javascript:query('"+data.id+"','"+data.name+"','"+fileDep+"')");
   var aText=document.createTextNode(data.name);
   aDom.appendChild(aText);
   return aDom;
    },
   function(data){
   if(data.fileType==0){
    return "目录";
    }
   return "可下载文件";
   },
   function(data){
    if(data.fileType==0){
    return "无相关操作";
    }
   var aDom=document.createElement("a");
   aDom.setAttribute("href","javascript:openWindow('/scrood/yg/downloadRecordAction.html?method=applyDownload&dep="+fileDep+"&fileId="+data.id+"')");
   var aText=document.createTextNode("申请下载");
   aDom.appendChild(aText);
   return aDom;

   }
   ];
   DWRUtil.removeAllRows("fileResultBody");
   DWRUtil.addRows('fileResultBody', data,cellfuncs,{
    rowCreator:function(options) {
        var row = document.createElement("tr");
         return row;
    },
    cellCreator:function(options) {
        var td = document.createElement("td");
        td.setAttribute("align","center");
        return td;
    }
    });
   }
 </script>

 

在query查询函数中，调用FileManager得到查询结果，和普通的java方法调用一样。但要注意，第二个参数传入的是回调函数，用于处理响应值，注要是指如何渲染。

在回调函数中第一个要定义的就是cellfuns，它代表每一列值的表现形势，有多少function，就有多少列。每一个单元格的内容可以是简单的值，也可以是一个包含了其它HTML标签的Document.

接下来就是具体的处理参数值的过程。DwrUtil是DWR框架提供的一个非常有用的功具函数，包含通常的是JS处理功能，如动态添加select的option等，可以单独使用。

DwrUtil.addRows('fileResultBody',data,cellfuncs,...)是用来实际插入数据的，第一个插入是要插入数据所在的表格的ID，最好是tbody的ID，data为值，cellfuncs前面已经介绍了，最后两个参数是用于创建<tr>和<td>属性的