DWZ富客户端框架(dwzjs)结合struts2的增改删查

DWZ是实用的国产JQuery UI框架，个人感觉比较好用。

他和服务器端主要通过Ajax方式交互，数据格式为json。

服务器响应数据代码示例：

{

     "statusCode":"200",

    "message":"操作成功",

    "navTabId":"actvtyList",

    "rel":"",

    "callbackType":"closeCurrent",

    "forwardUrl":""

}

statusCode是返回码， 200表示成功， 300表示服务器错误，301表示请求超时。

message为返回信息，dwz中会显示在一个在浏览器顶部中间位置的对话框中。

rel 没研究，想研究的可以参考dwz的官方文档。

navTabId是tab id，表示刷新指定的tab。

callbackType是回调方式，closeCurrent表示关闭当前的tab或者dialog

forwardUrl 为转向url，表示当前tab或者dialog跳转到指定的url。

首先为DWZ定义java数据模型

[java] view plain copy

1. package com.mytest.domain.dwz;  
2.   
3. public class DwzAjaxResult {  
4.     private String statusCode;  
5.     private String message;  
6.     private String navTabId;  
7.     private String callbackType;  
8.     private String forwardUrl;  
9.       
10.     public DwzAjaxResult(String statusCode, String message, String navTabId,  
11.             String callbackType, String forwardUrl) {  
12.         this.statusCode = statusCode;  
13.         this.message = message;  
14.         this.navTabId = navTabId;  
15.         this.callbackType = callbackType;  
16.         this.forwardUrl = forwardUrl;  
17.     }  
18.     //getters & setters  
19. }  

[java] view plain copy

1. public class DwzPager implements Serializable {  
2.     private static final long serialVersionUID = 1L;  
3.     private String status;  
4.     private String keywords;  
5.     private Integer pageNum = 1;  
6.     private Integer numPerPage = 20;  
7.     private Integer pageTotal = 0;  
8.     private Integer total = 0;  
9.       
10.     public String getStatus() {  
11.         return status;  
12.     }  
13.     public void setStatus(String status) {  
14.         this.status = status;  
15.     }  
16.     public String getKeywords() {  
17.         return keywords;  
18.     }  
19.     public void setKeywords(String keywords) {  
20.         this.keywords = keywords;  
21.     }  
22.     public Integer getPageNum() {  
23.         if(pageNum == null || pageNum < 1) pageNum = 1;  
24.         if(pageNum > getPageTotal()) pageNum = getPageTotal();  
25.         return pageNum;  
26.     }  
27.     public void setPageNum(Integer pageNum) {  
28.         this.pageNum = pageNum;  
29.     }  
30.     public Integer getNumPerPage() {  
31.         return numPerPage;  
32.     }  
33.     public void setNumPerPage(Integer numPerPage) {  
34.         if(numPerPage!=null)  
35.             this.numPerPage = numPerPage;  
36.     }  
37.     public Integer getPageTotal() {  
38.         if(total == null) return 1;  
39.         pageTotal = (total + numPerPage - 1) / numPerPage;  
40.         return pageTotal;  
41.     }  
42.     public void setPageTotal(Integer pageTotal) {  
43.         this.pageTotal = pageTotal;  
44.     }  
45.     public Integer getTotal() {  
46.         return total;  
47.     }  
48.     public void setTotal(Integer total) {  
49.         this.total = total;  
50.     }  
51. }  

然后是服务器struts代码，其中printDwzJsonResult()方法是将对象转换成dwz数据格式并写入servletoutputstream。

[java] view plain copy

1. public class ActivityAction extends BaseActionSupport {  
2.     private ActivityService activityService;  
3.     private List<Activity> activityList;  
4.     private Activity activity;  
5.     private String pk;//主键值，以#连接（用于组合主键）  
6.       
7.     private DwzPager pager = new DwzPager();  
8.         //需要定义下面4个变量是dwz的pagerForm提交的分页参数  
9.         private String status = "";  
10.     private String keywords = "";  
11.     private Integer pageNum = 1;  
12.     private Integer numPerPage = 20;  
13.     public ActivityAction(){  
14.         activityService = new ActivityServiceImpl();  
15.     }  
16.   
17.     public void activityAdd() throws Exception{  
18.         DwzAjaxResult resultBean;  
19.         if(activityService.addActivity(activity)){  
20.             setSessionPageNum(pageNum);//将当前页码保存到session，避免操作完后刷新列表时自动跳转到第1页的尴尬  
21.             resultBean = new DwzAjaxResult("200","保存成功","","forward",request.getContextPath()+"/admin/actvty/add.jsp");  
22.         }else{  
23.             resultBean = new DwzAjaxResult("300","保存失败","","","");  
24.         }  
25.         printDwzJsonResult(resultBean);  
26.     }  
27.   
28.     public void activityUpdate() throws Exception{  
29.         DwzAjaxResult resultBean;  
30.         if(activityService.updateActivity(activity)){  
31.             setSessionPageNum(pageNum);//将当前页码保存到session，避免操作完后刷新列表时自动跳转到第1页的尴尬  
32.             resultBean = new DwzAjaxResult("200","修改成功","actvtyList","closeCurrent","");  
33.         }else{  
34.             resultBean = new DwzAjaxResult("300","修改失败","","","");  
35.         }  
36.         printDwzJsonResult(resultBean);  
37.     }  
38.   
39.     public String activityEdit() throws Exception{  
40.         String[] prikeys = pk.split("#");//拆分主键值，这里简单地取第一个主键，需要完善逻辑  
41.         activity = activityService.findActivity(Integer.parseInt(prikeys[0]));  
42.         return SUCCESS;  
43.     }  
44.   
45.     public void activityDelete() throws Exception{  
46.         DwzAjaxResult resultBean;  
47.         String[] prikeys = pk.split("#");  
48.         activity = activityService.findActivity(Integer.parseInt(prikeys[0]));  
49.         if(activity!=null && activityService.deleteActivity(activity)){  
50.             setSessionPageNum(pageNum);  
51.             resultBean = new DwzAjaxResult("200","删除成功","actvtyList","","");  
52.         }else{  
53.             resultBean = new DwzAjaxResult("300","删除失败","","","");  
54.         }  
55.         printDwzJsonResult(resultBean);  
56.     }  
57.   
58.     public void activitySearch() throws Exception{  
59.         pager.setPageNum(1);  
60.         setSessionPageNum(1);  
61.         DwzAjaxResult resultBean = new DwzAjaxResult("200","结果已过滤","actvtyList","","");//不操作业务逻辑，直接刷新actvtyList列表  
62.         printDwzJsonResult(resultBean);  
63.     }  
64.   
65.     public String activityList() throws Exception{  
66.         int total = 0;  
67.         if(activity != null) total = activityService.totalFuzzyActivitys(activity);  
68.         else total = activityService.totalActivitys();  
69.         pageNum = getSessionPageNum()!=null?getSessionPageNum():pageNum;  
70.         pager.setTotal(total);  
71.         pager.setStatus(status);  
72.         pager.setKeywords(keywords);  
73.         pager.setPageNum(pageNum);  
74.         pager.setNumPerPage(numPerPage==null?pager.getNumPerPage():numPerPage);  
75.         if(activity != null) activityList = activityService.getFuzzyActivitys(activity, pager.getPageNum(), pager.getNumPerPage());  
76.         else activityList = activityService.getActivitys(pager.getPageNum(), pager.getNumPerPage());  
77.         removeSessionPageNum(); //重置session中的pageNum  
78.         return SUCCESS;  
79.     }  
80.   
81.     public List<Activity> getActivityList(){  
82.         return activityList;  
83.     }  
84.   
85.     public void setPk(String pk){  
86.         this.pk = pk;  
87.     }  
88.   
89.     public DwzPager getPager() {  
90.         return pager;  
91.     }  
92.   
93.     public void setActivity(Activity activity){  
94.         this.activity = activity;  
95.     }  
96.   
97.     public Activity getActivity(){  
98.         return activity;  
99.     }  
100.   
101.     public void setStatus(String status) {  
102.         this.status = status;  
103.     }  
104.   
105.     public void setKeywords(String keywords) {  
106.         this.keywords = keywords;  
107.     }  
108.   
109.     public void setPageNum(Integer pageNum) {  
110.         this.pageNum = pageNum;  
111.     }  
112.   
113.     public Integer getPageNum() {  
114.         return this.pageNum;  
115.     }  
116.   
117.     public void setNumPerPage(Integer numPerPage) {  
118.         this.numPerPage = numPerPage;  
119.     }  
120.   
121. }  

struts2配置，大部分action都是ajax请求，所以都没配置处理结果。

[html] view plain copy

1. <?xml version="1.0" encoding="UTF-8" ?>  
2. <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" "http://struts.apache.org/dtds/struts-2.3.dtd">  
3. <struts>  
4.     <package name="actvtyAdmin" namespace="/admin/actvty" extends="struts-default">  
5.         <action name="activityAdd" class="com.mytest.web.action.actvty.ActivityAction" method="activityAdd" />  
6.         <action name="activityEdit" class="com.mytest.web.action.actvty.ActivityAction" method="activityEdit">  
7.             <result>/admin/actvty/edit.jsp</result>  
8.         </action>  
9.         <action name="activityUpdate" class="com.mytest.web.action.actvty.ActivityAction" method="activityUpdate" />  
10.         <action name="activityDelete" class="com.mytest.web.action.actvty.ActivityAction" method="activityDelete" />  
11.         <action name="activityList" class="com.mytest.web.action.actvty.ActivityAction" method="activityList">  
12.             <result>/admin/actvty/list.jsp</result>  
13.         </action>  
14.         <action name="activitySearch" class="com.mytest.web.action.actvty.ActivityAction" method="activitySearch"/>  
15.     </package>  
16. </struts>  

list.jsp (DWZ中扩展了a标签，分别设置target='navTab"和"dialog"可以使得链接网页分别在tab、dialog中打开，另外target="ajaxTodo"可以请求服务器url。详细解释可以参看dwz文档，这里不赘述)

[html] view plain copy

1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
2. <%@ taglib uri="/struts-tags" prefix="s" %>  
3. <% String base = request.getContextPath();%>  
4. <div class="pageHeader" style="display:none;">   
5. <s:form id="pagerForm" method="post" action="/admin/actvty/activityList.action">   
6.     <input type="hidden" name="status" value="${pager.status}"/>  
7.     <input type="hidden" name="keywords" value="${pager.keywords}"/>  
8.     <input type="hidden" name="pageNum" value="${pager.pageNum}"/>  
9.     <input type="hidden" name="numPerPage" value="${pager.numPerPage}"/>  
10.     <input type="hidden" name="activity.name" value="${activity.name}"/>  
11.     <input type="hidden" name="activity.image" value="${activity.image}"/>  
12.     <input type="hidden" name="activity.type" value="${activity.type}"/>  
13.     <input type="hidden" name="activity.intro" value="${activity.intro}"/>  
14.     <input type="hidden" name="activity.st_time" value="${activity.st_time}"/>  
15.     <input type="hidden" name="activity.ed_time" value="${activity.ed_time}"/>  
16.     <input type="hidden" name="activity.address" value="${activity.address}"/>  
17.     <input type="hidden" name="activity.stars" value="${activity.stars}"/>  
18.     <input type="hidden" name="activity.join_way" value="${activity.join_way}"/>  
19.     <input type="hidden" name="activity.album_id" value="${activity.album_id}"/>  
20.     <input type="hidden" name="activity.entrants" value="${activity.entrants}"/>  
21. </s:form>  
22. </div>  
23. <div class="pageContent">  
24.     <div class="panelBar">  
25.         <ul class="toolBar">  
26.             <li><a href="actvty/add.jsp" target="navTab" rel="" class="add"><span><s:text name="AddLinkLabel"/></span></a></li>  
27.             <li><a href="<%=base %>/admin/actvty/activityDelete.action?pageNum=<s:property value="pager.pageNum"/>&pk={pkstring}"   
28.                 target="ajaxTodo" class="delete" title="<s:text name="DelConfirmMsg"/>"><span><s:text name="DelLinkLabel"/></span></a></li>  
29.             <li><a href="<%=base %>/admin/actvty/activityEdit.action?pageNum=<s:property value="pager.pageNum"/>&pk={pkstring}"   
30.                 target="navTab" rel="" class="edit"><span><s:text name="EditLinkLabel"/></span></a></li>  
31.             <li><a href="<%=base %>/admin/actvty/search.jsp"   
32.                 target="dialog" rel="" class="icon" mask="true" width="450" height="300"><span><s:text name="SearchLinkLabel"/></span></a></li></ul>  
33.     </div>  
34.     <table class="table" width="100%" layoutH="75">  
35.         <thead>  
36.             <tr>  
37.                 <th> </th>  
38.                 <th>name</th>  
39.                 <th>image</th>  
40.                 <th>type</th>  
41.                 <th>intro</th>  
42.                 <th>st_time</th>  
43.                 <th>ed_time</th>  
44.                 <th>address</th>  
45.                 <th>stars</th>  
46.                 <th>join_way</th>  
47.                 <th>album_id</th>  
48.                 <th>entrants</th>  
49.             </tr>  
50.         </thead>  
51.         <tbody>  
52.             <s:iterator var="entity" value="activityList" status="s">  
53.             <tr target="pkstring" rel="<s:property value="#entity.id"/>">  
54.                 <td><s:property value="#s.index+1"/></td>  
55.                 <td><s:property value="#entity.name"/></td>  
56.                 <td><s:property value="#entity.image"/></td>  
57.                 <td><s:property value="#entity.type"/></td>  
58.                 <td><s:property value="#entity.intro"/></td>  
59.                 <td><s:property value="#entity.st_time"/></td>  
60.                 <td><s:property value="#entity.ed_time"/></td>  
61.                 <td><s:property value="#entity.address"/></td>  
62.                 <td><s:property value="#entity.stars"/></td>  
63.                 <td><s:property value="#entity.join_way"/></td>  
64.                 <td><s:property value="#entity.album_id"/></td>  
65.                 <td><s:property value="#entity.entrants"/></td>  
66.             </tr>  
67.             </s:iterator>  
68.         </tbody>  
69.     </table>  
70.     <div class="panelBar">  
71.         <div class="pages">  
72.             <span><s:text name="PagerPsizeLabel"><s:param>  
73.             <select class="combox" name="numPerPage" onchange="navTabPageBreak({numPerPage:this.value})">  
74.                 <option value="20" ${pager.numPerPage == 20?"selected":""}>20</option>   
75.                 <option value="50" ${pager.numPerPage == 50?"selected":""}>50</option>   
76.                 <option value="100" ${pager.numPerPage == 100?"selected":""}>100</option>   
77.                 <option value="200" ${pager.numPerPage == 200?"selected":""}>200</option>   
78.             </select>  
79.             </s:param></s:text>,<s:text name="PagerTotalLabel"><s:param>${pager.total}</s:param></s:text></span>  
80.         </div>  
81.         <div class="pagination" targetType="navTab" totalCount="${pager.total}" numPerPage="${pager.numPerPage}" pageNumShown="10" currentPage="${pager.pageNum}"></div>  
82.     </div>  
83. </div>  

add.jsp

[html] view plain copy

1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
2. <%@ taglib uri="/struts-tags" prefix="s" %>  
3. <h2 class="contentTitle"><s:text name="AddPageTitle"><s:param>Activity</s:param></s:text></h2>  
4. <div class="pageContent">  
5. <s:form method="post" action="/admin/actvty/activityAdd.action" class="pageForm required-validate" onsubmit="return validateCallback(this, navTabAjaxDone)">  
6.     <div class="pageFormContent nowrap" layoutH="97">  
7.         <dl><dt>name：</dt><dd>  
8.             <input type="text" class="required " name="activity.name" style="width:300px;"/>  
9.             <span class="info"></span></dd></dl>  
10.         <dl><dt>image：</dt><dd>  
11.             <input type="text" class="required " name="activity.image" style="width:300px;"/>  
12.             <span class="info"></span></dd></dl>  
13.         <dl><dt>type：</dt><dd>  
14.             <input type="text" class="required digits" name="activity.type" style="width:300px;"/>  
15.             <span class="info"></span></dd></dl>  
16.         <dl><dt>intro：</dt><dd>  
17.             <input type="text" class="required " name="activity.intro" style="width:300px;"/>  
18.             <span class="info"></span></dd></dl>  
19.         <dl><dt>st_time：</dt><dd>  
20.             <input type="text" class="required date" name="activity.st_time" style="width:300px;"/>  
21.             <span class="info"></span></dd></dl>  
22.         <dl><dt>ed_time：</dt><dd>  
23.             <input type="text" class="required date" name="activity.ed_time" style="width:300px;"/>  
24.             <span class="info"></span></dd></dl>  
25.         <dl><dt>address：</dt><dd>  
26.             <input type="text" class="required " name="activity.address" style="width:300px;"/>  
27.             <span class="info"></span></dd></dl>  
28.         <dl><dt>stars：</dt><dd>  
29.             <input type="text" class="required " name="activity.stars" style="width:300px;"/>  
30.             <span class="info"></span></dd></dl>  
31.         <dl><dt>join_way：</dt><dd>  
32.             <input type="text" class="required " name="activity.join_way" style="width:300px;"/>  
33.             <span class="info"></span></dd></dl>  
34.         <dl><dt>album_id：</dt><dd>  
35.             <select class="combox" name="activity.album_id" style="width:300px;"><option value="">--Blank--</option></select>  
36.             <span class="info"></span></dd></dl>  
37.         <dl><dt>entrants：</dt><dd>  
38.             <input type="text" class="required digits" name="activity.entrants" style="width:300px;"/>  
39.             <span class="info"></span></dd></dl>  
40.     </div>  
41.     <div class="formBar">  
42.         <ul><li><div class="buttonActive"><div class="buttonContent"><button type="submit"><s:text name="SubmitButtonLabel"/></button></div></div></li>  
43.             <li><div class="button"><div class="buttonContent"><button type="button" class="close"><s:text name="CancelButtonLabel"/></button></div></div></li></ul>  
44.     </div>  
45. </s:form>  
46. </div>  

edit.jsp

[html] view plain copy

1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
2. <%@ taglib uri="/struts-tags" prefix="s" %>  
3. <h2 class="contentTitle"><s:text name="EditPageTitle"><s:param>Activity</s:param></s:text></h2>  
4. <div class="pageContent">  
5. <s:form method="post" action="/admin/actvty/activityUpdate.action" class="pageForm required-validate" onsubmit="return validateCallback(this, navTabAjaxDone)">  
6.     <div class="pageFormContent nowrap" layoutH="97">  
7.         <dl><dt>name：</dt><dd>  
8.             <input type="text" class="required " name="activity.name" style="width:300px;" value="<s:property value="activity.name"/>"/>  
9.             <span class="info"></span></dd></dl>  
10.         <dl><dt>image：</dt><dd>  
11.             <input type="text" class="required " name="activity.image" style="width:300px;" value="<s:property value="activity.image"/>"/>  
12.             <span class="info"></span></dd></dl>  
13.         <dl><dt>type：</dt><dd>  
14.             <input type="text" class="required digits" name="activity.type" style="width:300px;" value="<s:property value="activity.type"/>"/>  
15.             <span class="info"></span></dd></dl>  
16.         <dl><dt>intro：</dt><dd>  
17.             <input type="text" class="required " name="activity.intro" style="width:300px;" value="<s:property value="activity.intro"/>"/>  
18.             <span class="info"></span></dd></dl>  
19.         <dl><dt>st_time：</dt><dd>  
20.             <input type="text" class="required date" name="activity.st_time" style="width:300px;" value="<s:property value="activity.st_time"/>"/>  
21.             <span class="info"></span></dd></dl>  
22.         <dl><dt>ed_time：</dt><dd>  
23.             <input type="text" class="required date" name="activity.ed_time" style="width:300px;" value="<s:property value="activity.ed_time"/>"/>  
24.             <span class="info"></span></dd></dl>  
25.         <dl><dt>address：</dt><dd>  
26.             <input type="text" class="required " name="activity.address" style="width:300px;" value="<s:property value="activity.address"/>"/>  
27.             <span class="info"></span></dd></dl>  
28.         <dl><dt>stars：</dt><dd>  
29.             <input type="text" class="required " name="activity.stars" style="width:300px;" value="<s:property value="activity.stars"/>"/>  
30.             <span class="info"></span></dd></dl>  
31.         <dl><dt>join_way：</dt><dd>  
32.             <input type="text" class="required " name="activity.join_way" style="width:300px;" value="<s:property value="activity.join_way"/>"/>  
33.             <span class="info"></span></dd></dl>  
34.         <dl><dt>album_id：</dt><dd>  
35.             <select class="combox" name="activity.album_id" style="width:300px;"><option value="">--Blank--</option></select>  
36.             <span class="info"></span></dd></dl>  
37.         <dl><dt>entrants：</dt><dd>  
38.             <input type="text" class="required digits" name="activity.entrants" style="width:300px;" value="<s:property value="activity.entrants"/>"/>  
39.             <span class="info"></span></dd></dl>  
40.     </div>  
41.     <div class="formBar">  
42.         <ul>  
43.             <li>  
44.             <input type="hidden" name="activity.id" value="<s:property value="activity.id"/>"/>  
45.                 <input type="hidden" name="pageNum" value="<s:property value="pageNum"/>"/></li>  
46.             <li><div class="buttonActive"><div class="buttonContent"><button type="submit"><s:text name="SubmitButtonLabel"/></button></div></div></li>  
47.             <li><div class="button"><div class="buttonContent"><button type="button" class="close"><s:text name="CancelButtonLabel"/></button></div></div></li></ul>  
48.     </div>  
49. </s:form>  
50. </div>  

search.jsp

[html] view plain copy

1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
2. <%@ taglib uri="/struts-tags" prefix="s" %>  
3. <script type="text/javascript">  
4.     $(function(){  
5.         $("#searchSettingForm").find("input.textInput").each(function(){  
6.             var $name = $(this).attr("name");  
7.             $(this).val($("#pagerForm").find("input[name='"+$name+"']").val());  
8.         });  
9.     });  
10.     function setSearchValues(json){  
11.         $("#searchSettingForm").find("input.textInput").each(function(){  
12.             var $name = $(this).attr("name");  
13.             var $val = $.trim($(this).val());  
14.             $("#pagerForm").find("input[name='"+$name+"']").val($val);  
15.         });  
16.         if(json.statusCode==DWZ.statusCode.ok && json.navTabId){  
17.             navTab.reloadFlag(json.navTabId);  
18.         }  
19.         $.pdialog.closeCurrent();  
20.     }  
21. </script>  
22. <div class="pageContent">  
23. <s:form id="searchSettingForm" method="post" action="/admin/actvty/activitySearch.action" class="pageForm" onsubmit="return validateCallback(this, setSearchValues)">  
24.     <div class="pageFormContent" layoutH="55" style="height: 210px; overflow: auto;">  
25.         <p><label>name：</label>  
26.             <input type="text" class="textInput " name="activity.name" style="width:200px;"/>  
27.         </p>  
28.         <p><label>image：</label>  
29.             <input type="text" class="textInput " name="activity.image" style="width:200px;"/>  
30.         </p>  
31.         <p><label>type：</label>  
32.             <input type="text" class="textInput digits" name="activity.type" style="width:200px;"/>  
33.         </p>  
34.         <p><label>intro：</label>  
35.             <input type="text" class="textInput " name="activity.intro" style="width:200px;"/>  
36.         </p>  
37.         <p><label>st_time：</label>  
38.             <input type="text" class="textInput date" name="activity.st_time" style="width:200px;"/>  
39.         </p>  
40.         <p><label>ed_time：</label>  
41.             <input type="text" class="textInput date" name="activity.ed_time" style="width:200px;"/>  
42.         </p>  
43.         <p><label>address：</label>  
44.             <input type="text" class="textInput " name="activity.address" style="width:200px;"/>  
45.         </p>  
46.         <p><label>stars：</label>  
47.             <input type="text" class="textInput " name="activity.stars" style="width:200px;"/>  
48.         </p>  
49.         <p><label>join_way：</label>  
50.             <input type="text" class="textInput " name="activity.join_way" style="width:200px;"/>  
51.         </p>  
52.         <p><label>album_id：</label>  
53.             <select class="combox" name="activity.album_id" style="width:160px;"><option value="">--Blank--</option></select>  
54.         </p>  
55.         <p><label>entrants：</label>  
56.             <input type="text" class="textInput digits" name="activity.entrants" style="width:200px;"/>  
57.         </p>  
58.     </div>  
59.     <div class="formBar">  
60.         <ul><li><div class="buttonActive"><div class="buttonContent"><button type="submit"><s:text name="SubmitButtonLabel"/></button></div></div></li>  
61.             <li><div class="buttonActive"><div class="buttonContent"><button type="reset"><s:text name="ResetButtonLabel"/></button></div></div></li>  
62.             <li><div class="button"><div class="buttonContent"><button type="button" class="close"><s:text name="CancelButtonLabel"/></button></div></div></li></ul>  
63.     </div>  
64. </s:form>  
65. </div>  

其中用到一些国际化的配置，index.jsp中加载dwz.frag.xml全局配置

[html] view plain copy

1. $(function(){  
2.     var config = "<s:text name="DwzConfigFile"/>";  
3.     DWZ.init(config, {  
4.         loginUrl:"../login.jsp",    // 跳到登录页面  
5.         statusCode:{ok:200, error:300, timeout:301}, //【可选】  
6.         pageInfo:{pageNum:"pageNum", numPerPage:"numPerPage", orderField:"orderField", orderDirection:"orderDirection"}, //【可选】  
7.         debug:false,    // 调试模式 【true|false】  
8.         callback:function(){  
9.             initEnv();  
10.             $("#themeList").theme({themeBase:"themes"}); // themeBase 相对于index页面的主题base路径  
11.         }  
12.     });  
13. });  

几张截图