使用Dwr渲染table

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

1、设计目标

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

2、web.xml中部署Dwr
xml 代码

   1. <servlet> 
   2.         <servlet-name>dwr</servlet-name> 
   3.         <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class> 
   4.         <init-param> 
   5.             <param-name>debug</param-name> 
   6.             <param-value>true</param-value> 
   7.         </init-param> 
   8.     </servlet> 
   9.     <servlet-mapping> 
  10.         <servlet-name>dwr</servlet-name> 
  11.         <url-pattern>/dwr/*</url-pattern> 
  12.     </servlet-mapping> 

3、Dwr.xml部置
xml 代码

   1. <dwr> 
   2.     <allow> 
   3.         <create creator="spring" javascript="FileManager"> 
   4.             <param name="beanName" value="fileItemManager" /> 
   5.             <include method="getFileItemsByParent" /> 
   6.         </create> 
   7.         <convert match="com.csroad.fileproject.model.FileItem" 
   8.             converter="bean"> 
   9.             <param name="include" value="id,name,fileType,parentId" /> 
  10.         </convert> 
  11.     </allow> 
  12.  
  13. </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 代码

   1. <script type='text/javascript' src='${ctx}/dwr/interface/FileManager.js'></script>  
   2.  
   3. <script type='text/javascript'  
   4.     src='<%=request.getContextPath()%>/dwr/engine.js'>  
   5. </script>  
   6. <script type='text/javascript'  
   7.     src='<%=request.getContextPath()%>/dwr/util.js'></script> 



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

5、编写JS代码
js 代码

   1. <script type="text/javascript">  
   2. //查询函数  
   3. function query(parentId,label,dep){  
   4.     FileManager.getFileItemsByParent(parentId,getFileList);  
   5.     DWRUtil.useLoadingMessage("文件正在载入中，请稍等...........");      
   6.  }  
   7.   //回调函数  
   8.    function getFileList(data){  
   9.    var cellfuncs=[  
  10.    function(data){  
  11.    if(data.fileType==1){  
  12.    return data.name;  
  13.    }  
  14.    var aDom=document.createElement("a");  
  15.    aDom.setAttribute("href","javascript:query('"+data.id+"','"+data.name+"','"+fileDep+"')");  
  16.    var aText=document.createTextNode(data.name);  
  17.    aDom.appendChild(aText);  
  18.    return aDom;  
  19.     },  
  20.    function(data){  
  21.    if(data.fileType==0){  
  22.     return "目录";  
  23.     }  
  24.    return "可下载文件";  
  25.    },  
  26.    function(data){  
  27.     if(data.fileType==0){  
  28.     return "无相关操作";  
  29.     }  
  30.    var aDom=document.createElement("a");  
  31.    aDom.setAttribute("href","javascript:openWindow('/scrood/yg/downloadRecordAction.html?method=applyDownload&dep="+fileDep+"&fileId="+data.id+"')");  
  32.    var aText=document.createTextNode("申请下载");  
  33.    aDom.appendChild(aText);  
  34.    return aDom;  
  35.     
  36.    }  
  37.    ];  
  38.    DWRUtil.removeAllRows("fileResultBody");  
  39.    DWRUtil.addRows('fileResultBody', data,cellfuncs,{      
  40.     rowCreator:function(options) {      
  41.         var row = document.createElement("tr");      
  42.          return row;      
  43.     },      
  44.     cellCreator:function(options) {      
  45.         var td = document.createElement("td");      
  46.         td.setAttribute("align","center");      
  47.         return td;      
  48.     }             
  49.     });         
  50.    }  
  51.  </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>属性的