使用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>属性的