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数据模型
package com.mytest.domain.dwz;
public class DwzAjaxResult {
private String statusCode;
private String message;
private String navTabId;
private String callbackType;
private String forwardUrl;
public DwzAjaxResult(String statusCode, String message, String navTabId,
String callbackType, String forwardUrl) {
this.statusCode = statusCode;
this.message = message;
this.navTabId = navTabId;
this.callbackType = callbackType;
this.forwardUrl = forwardUrl;
}
//getters & setters
}
public class DwzPager implements Serializable {
private static final long serialVersionUID = 1L;
private String status;
private String keywords;
private Integer pageNum = 1;
private Integer numPerPage = 20;
private Integer pageTotal = 0;
private Integer total = 0;
public String getStatus() {
return status;
}
public void setStatus(String status) {
this.status = status;
}
public String getKeywords() {
return keywords;
}
public void setKeywords(String keywords) {
this.keywords = keywords;
}
public Integer getPageNum() {
if(pageNum == null || pageNum < 1) pageNum = 1;
if(pageNum > getPageTotal()) pageNum = getPageTotal();
return pageNum;
}
public void setPageNum(Integer pageNum) {
this.pageNum = pageNum;
}
public Integer getNumPerPage() {
return numPerPage;
}
public void setNumPerPage(Integer numPerPage) {
if(numPerPage!=null)
this.numPerPage = numPerPage;
}
public Integer getPageTotal() {
if(total == null) return 1;
pageTotal = (total + numPerPage - 1) / numPerPage;
return pageTotal;
}
public void setPageTotal(Integer pageTotal) {
this.pageTotal = pageTotal;
}
public Integer getTotal() {
return total;
}
public void setTotal(Integer total) {
this.total = total;
}
}然后是服务器struts代码，其中printDwzJsonResult()方法是将对象转换成dwz数据格式并写入servletoutputstream。
public class ActivityAction extends BaseActionSupport {
private ActivityService activityService;
private List<Activity> activityList;
private Activity activity;
private String pk;//主键值，以#连接（用于组合主键）
private DwzPager pager = new DwzPager();
//需要定义下面4个变量是dwz的pagerForm提交的分页参数
private String status = "";
private String keywords = "";
private Integer pageNum = 1;
private Integer numPerPage = 20;
public ActivityAction(){
activityService = new ActivityServiceImpl();
}
public void activityAdd() throws Exception{
DwzAjaxResult resultBean;
if(activityService.addActivity(activity)){
setSessionPageNum(pageNum);//将当前页码保存到session，避免操作完后刷新列表时自动跳转到第1页的尴尬
resultBean = new DwzAjaxResult("200","保存成功","","forward",request.getContextPath()+"/admin/actvty/add.jsp");
}else{
resultBean = new DwzAjaxResult("300","保存失败","","","");
}
printDwzJsonResult(resultBean);
}
public void activityUpdate() throws Exception{
DwzAjaxResult resultBean;
if(activityService.updateActivity(activity)){
setSessionPageNum(pageNum);//将当前页码保存到session，避免操作完后刷新列表时自动跳转到第1页的尴尬
resultBean = new DwzAjaxResult("200","修改成功","actvtyList","closeCurrent","");
}else{
resultBean = new DwzAjaxResult("300","修改失败","","","");
}
printDwzJsonResult(resultBean);
}
public String activityEdit() throws Exception{
String[] prikeys = pk.split("#");//拆分主键值，这里简单地取第一个主键，需要完善逻辑
activity = activityService.findActivity(Integer.parseInt(prikeys[0]));
return SUCCESS;
}
public void activityDelete() throws Exception{
DwzAjaxResult resultBean;
String[] prikeys = pk.split("#");
activity = activityService.findActivity(Integer.parseInt(prikeys[0]));
if(activity!=null && activityService.deleteActivity(activity)){
setSessionPageNum(pageNum);
resultBean = new DwzAjaxResult("200","删除成功","actvtyList","","");
}else{
resultBean = new DwzAjaxResult("300","删除失败","","","");
}
printDwzJsonResult(resultBean);
}
public void activitySearch() throws Exception{
pager.setPageNum(1);
setSessionPageNum(1);
DwzAjaxResult resultBean = new DwzAjaxResult("200","结果已过滤","actvtyList","","");//不操作业务逻辑，直接刷新actvtyList列表
printDwzJsonResult(resultBean);
}
public String activityList() throws Exception{
int total = 0;
if(activity != null) total = activityService.totalFuzzyActivitys(activity);
else total = activityService.totalActivitys();
pageNum = getSessionPageNum()!=null?getSessionPageNum():pageNum;
pager.setTotal(total);
pager.setStatus(status);
pager.setKeywords(keywords);
pager.setPageNum(pageNum);
pager.setNumPerPage(numPerPage==null?pager.getNumPerPage():numPerPage);
if(activity != null) activityList = activityService.getFuzzyActivitys(activity, pager.getPageNum(), pager.getNumPerPage());
else activityList = activityService.getActivitys(pager.getPageNum(), pager.getNumPerPage());
removeSessionPageNum(); //重置session中的pageNum
return SUCCESS;
}
public List<Activity> getActivityList(){
return activityList;
}
public void setPk(String pk){
this.pk = pk;
}
public DwzPager getPager() {
return pager;
}
public void setActivity(Activity activity){
this.activity = activity;
}
public Activity getActivity(){
return activity;
}
public void setStatus(String status) {
this.status = status;
}
public void setKeywords(String keywords) {
this.keywords = keywords;
}
public void setPageNum(Integer pageNum) {
this.pageNum = pageNum;
}
public Integer getPageNum() {
return this.pageNum;
}
public void setNumPerPage(Integer numPerPage) {
this.numPerPage = numPerPage;
}
}<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" "http://struts.apache.org/dtds/struts-2.3.dtd">
<struts>
<package name="actvtyAdmin" namespace="/admin/actvty" extends="struts-default">
<action name="activityAdd" class="com.mytest.web.action.actvty.ActivityAction" method="activityAdd" />
<action name="activityEdit" class="com.mytest.web.action.actvty.ActivityAction" method="activityEdit">
<result>/admin/actvty/edit.jsp</result>
</action>
<action name="activityUpdate" class="com.mytest.web.action.actvty.ActivityAction" method="activityUpdate" />
<action name="activityDelete" class="com.mytest.web.action.actvty.ActivityAction" method="activityDelete" />
<action name="activityList" class="com.mytest.web.action.actvty.ActivityAction" method="activityList">
<result>/admin/actvty/list.jsp</result>
</action>
<action name="activitySearch" class="com.mytest.web.action.actvty.ActivityAction" method="activitySearch"/>
</package>
</struts><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<% String base = request.getContextPath();%>
<div class="pageHeader" style="display:none;">
<s:form id="pagerForm" method="post" action="/admin/actvty/activityList.action">
<input type="hidden" name="status" value="${pager.status}"/>
<input type="hidden" name="keywords" value="${pager.keywords}"/>
<input type="hidden" name="pageNum" value="${pager.pageNum}"/>
<input type="hidden" name="numPerPage" value="${pager.numPerPage}"/>
<input type="hidden" name="activity.name" value="${activity.name}"/>
<input type="hidden" name="activity.image" value="${activity.image}"/>
<input type="hidden" name="activity.type" value="${activity.type}"/>
<input type="hidden" name="activity.intro" value="${activity.intro}"/>
<input type="hidden" name="activity.st_time" value="${activity.st_time}"/>
<input type="hidden" name="activity.ed_time" value="${activity.ed_time}"/>
<input type="hidden" name="activity.address" value="${activity.address}"/>
<input type="hidden" name="activity.stars" value="${activity.stars}"/>
<input type="hidden" name="activity.join_way" value="${activity.join_way}"/>
<input type="hidden" name="activity.album_id" value="${activity.album_id}"/>
<input type="hidden" name="activity.entrants" value="${activity.entrants}"/>
</s:form>
</div>
<div class="pageContent">
<div class="panelBar">
<ul class="toolBar">
<li><a href="actvty/add.jsp" target="navTab" rel="" class="add"><span><s:text name="AddLinkLabel"/></span></a></li>
<li><a href="<%=base %>/admin/actvty/activityDelete.action?pageNum=<s:property value="pager.pageNum"/>&pk={pkstring}"
target="ajaxTodo" class="delete" title="<s:text name="DelConfirmMsg"/>"><span><s:text name="DelLinkLabel"/></span></a></li>
<li><a href="<%=base %>/admin/actvty/activityEdit.action?pageNum=<s:property value="pager.pageNum"/>&pk={pkstring}"
target="navTab" rel="" class="edit"><span><s:text name="EditLinkLabel"/></span></a></li>
<li><a href="<%=base %>/admin/actvty/search.jsp"
target="dialog" rel="" class="icon" mask="true" width="450" height="300"><span><s:text name="SearchLinkLabel"/></span></a></li></ul>
</div>
<table class="table" width="100%" layoutH="75">
<thead>
<tr>
<th></th>
<th>name</th>
<th>image</th>
<th>type</th>
<th>intro</th>
<th>st_time</th>
<th>ed_time</th>
<th>address</th>
<th>stars</th>
<th>join_way</th>
<th>album_id</th>
<th>entrants</th>
</tr>
</thead>
<tbody>
<s:iterator var="entity" value="activityList" status="s">
<tr target="pkstring" rel="<s:property value="#entity.id"/>">
<td><s:property value="#s.index+1"/></td>
<td><s:property value="#entity.name"/></td>
<td><s:property value="#entity.image"/></td>
<td><s:property value="#entity.type"/></td>
<td><s:property value="#entity.intro"/></td>
<td><s:property value="#entity.st_time"/></td>
<td><s:property value="#entity.ed_time"/></td>
<td><s:property value="#entity.address"/></td>
<td><s:property value="#entity.stars"/></td>
<td><s:property value="#entity.join_way"/></td>
<td><s:property value="#entity.album_id"/></td>
<td><s:property value="#entity.entrants"/></td>
</tr>
</s:iterator>
</tbody>
</table>
<div class="panelBar">
<div class="pages">
<span><s:text name="PagerPsizeLabel"><s:param>
<select class="combox" name="numPerPage" οnchange="navTabPageBreak({numPerPage:this.value})">
<option value="20" ${pager.numPerPage == 20?"selected":""}>20</option>
<option value="50" ${pager.numPerPage == 50?"selected":""}>50</option>
<option value="100" ${pager.numPerPage == 100?"selected":""}>100</option>
<option value="200" ${pager.numPerPage == 200?"selected":""}>200</option>
</select>
</s:param></s:text>,<s:text name="PagerTotalLabel"><s:param>${pager.total}</s:param></s:text></span>
</div>
<div class="pagination" targetType="navTab" totalCount="${pager.total}" numPerPage="${pager.numPerPage}" pageNumShown="10" currentPage="${pager.pageNum}"></div>
</div>
</div>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<h2 class="contentTitle"><s:text name="AddPageTitle"><s:param>Activity</s:param></s:text></h2>
<div class="pageContent">
<s:form method="post" action="/admin/actvty/activityAdd.action" class="pageForm required-validate" οnsubmit="return validateCallback(this, navTabAjaxDone)">
<div class="pageFormContent nowrap" layoutH="97">
<dl><dt>name：</dt><dd>
<input type="text" class="required " name="activity.name" style="width:300px;"/>
<span class="info"></span></dd></dl>
<dl><dt>image：</dt><dd>
<input type="text" class="required " name="activity.image" style="width:300px;"/>
<span class="info"></span></dd></dl>
<dl><dt>type：</dt><dd>
<input type="text" class="required digits" name="activity.type" style="width:300px;"/>
<span class="info"></span></dd></dl>
<dl><dt>intro：</dt><dd>
<input type="text" class="required " name="activity.intro" style="width:300px;"/>
<span class="info"></span></dd></dl>
<dl><dt>st_time：</dt><dd>
<input type="text" class="required date" name="activity.st_time" style="width:300px;"/>
<span class="info"></span></dd></dl>
<dl><dt>ed_time：</dt><dd>
<input type="text" class="required date" name="activity.ed_time" style="width:300px;"/>
<span class="info"></span></dd></dl>
<dl><dt>address：</dt><dd>
<input type="text" class="required " name="activity.address" style="width:300px;"/>
<span class="info"></span></dd></dl>
<dl><dt>stars：</dt><dd>
<input type="text" class="required " name="activity.stars" style="width:300px;"/>
<span class="info"></span></dd></dl>
<dl><dt>join_way：</dt><dd>
<input type="text" class="required " name="activity.join_way" style="width:300px;"/>
<span class="info"></span></dd></dl>
<dl><dt>album_id：</dt><dd>
<select class="combox" name="activity.album_id" style="width:300px;"><option value="">--Blank--</option></select>
<span class="info"></span></dd></dl>
<dl><dt>entrants：</dt><dd>
<input type="text" class="required digits" name="activity.entrants" style="width:300px;"/>
<span class="info"></span></dd></dl>
</div>
<div class="formBar">
<ul><li><div class="buttonActive"><div class="buttonContent"><button type="submit"><s:text name="SubmitButtonLabel"/></button></div></div></li>
<li><div class="button"><div class="buttonContent"><button type="button" class="close"><s:text name="CancelButtonLabel"/></button></div></div></li></ul>
</div>
</s:form>
</div>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<h2 class="contentTitle"><s:text name="EditPageTitle"><s:param>Activity</s:param></s:text></h2>
<div class="pageContent">
<s:form method="post" action="/admin/actvty/activityUpdate.action" class="pageForm required-validate" οnsubmit="return validateCallback(this, navTabAjaxDone)">
<div class="pageFormContent nowrap" layoutH="97">
<dl><dt>name：</dt><dd>
<input type="text" class="required " name="activity.name" style="width:300px;" value="<s:property value="activity.name"/>"/>
<span class="info"></span></dd></dl>
<dl><dt>image：</dt><dd>
<input type="text" class="required " name="activity.image" style="width:300px;" value="<s:property value="activity.image"/>"/>
<span class="info"></span></dd></dl>
<dl><dt>type：</dt><dd>
<input type="text" class="required digits" name="activity.type" style="width:300px;" value="<s:property value="activity.type"/>"/>
<span class="info"></span></dd></dl>
<dl><dt>intro：</dt><dd>
<input type="text" class="required " name="activity.intro" style="width:300px;" value="<s:property value="activity.intro"/>"/>
<span class="info"></span></dd></dl>
<dl><dt>st_time：</dt><dd>
<input type="text" class="required date" name="activity.st_time" style="width:300px;" value="<s:property value="activity.st_time"/>"/>
<span class="info"></span></dd></dl>
<dl><dt>ed_time：</dt><dd>
<input type="text" class="required date" name="activity.ed_time" style="width:300px;" value="<s:property value="activity.ed_time"/>"/>
<span class="info"></span></dd></dl>
<dl><dt>address：</dt><dd>
<input type="text" class="required " name="activity.address" style="width:300px;" value="<s:property value="activity.address"/>"/>
<span class="info"></span></dd></dl>
<dl><dt>stars：</dt><dd>
<input type="text" class="required " name="activity.stars" style="width:300px;" value="<s:property value="activity.stars"/>"/>
<span class="info"></span></dd></dl>
<dl><dt>join_way：</dt><dd>
<input type="text" class="required " name="activity.join_way" style="width:300px;" value="<s:property value="activity.join_way"/>"/>
<span class="info"></span></dd></dl>
<dl><dt>album_id：</dt><dd>
<select class="combox" name="activity.album_id" style="width:300px;"><option value="">--Blank--</option></select>
<span class="info"></span></dd></dl>
<dl><dt>entrants：</dt><dd>
<input type="text" class="required digits" name="activity.entrants" style="width:300px;" value="<s:property value="activity.entrants"/>"/>
<span class="info"></span></dd></dl>
</div>
<div class="formBar">
<ul>
<li>
<input type="hidden" name="activity.id" value="<s:property value="activity.id"/>"/>
<input type="hidden" name="pageNum" value="<s:property value="pageNum"/>"/></li>
<li><div class="buttonActive"><div class="buttonContent"><button type="submit"><s:text name="SubmitButtonLabel"/></button></div></div></li>
<li><div class="button"><div class="buttonContent"><button type="button" class="close"><s:text name="CancelButtonLabel"/></button></div></div></li></ul>
</div>
</s:form>
</div>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<script type="text/javascript">
$(function(){
$("#searchSettingForm").find("input.textInput").each(function(){
var $name = $(this).attr("name");
$(this).val($("#pagerForm").find("input[name='"+$name+"']").val());
});
});
function setSearchValues(json){
$("#searchSettingForm").find("input.textInput").each(function(){
var $name = $(this).attr("name");
var $val = $.trim($(this).val());
$("#pagerForm").find("input[name='"+$name+"']").val($val);
});
if(json.statusCode==DWZ.statusCode.ok && json.navTabId){
navTab.reloadFlag(json.navTabId);
}
$.pdialog.closeCurrent();
}
</script>
<div class="pageContent">
<s:form id="searchSettingForm" method="post" action="/admin/actvty/activitySearch.action" class="pageForm" οnsubmit="return validateCallback(this, setSearchValues)">
<div class="pageFormContent" layoutH="55" style="height: 210px; overflow: auto;">
<p><label>name：</label>
<input type="text" class="textInput " name="activity.name" style="width:200px;"/>
</p>
<p><label>image：</label>
<input type="text" class="textInput " name="activity.image" style="width:200px;"/>
</p>
<p><label>type：</label>
<input type="text" class="textInput digits" name="activity.type" style="width:200px;"/>
</p>
<p><label>intro：</label>
<input type="text" class="textInput " name="activity.intro" style="width:200px;"/>
</p>
<p><label>st_time：</label>
<input type="text" class="textInput date" name="activity.st_time" style="width:200px;"/>
</p>
<p><label>ed_time：</label>
<input type="text" class="textInput date" name="activity.ed_time" style="width:200px;"/>
</p>
<p><label>address：</label>
<input type="text" class="textInput " name="activity.address" style="width:200px;"/>
</p>
<p><label>stars：</label>
<input type="text" class="textInput " name="activity.stars" style="width:200px;"/>
</p>
<p><label>join_way：</label>
<input type="text" class="textInput " name="activity.join_way" style="width:200px;"/>
</p>
<p><label>album_id：</label>
<select class="combox" name="activity.album_id" style="width:160px;"><option value="">--Blank--</option></select>
</p>
<p><label>entrants：</label>
<input type="text" class="textInput digits" name="activity.entrants" style="width:200px;"/>
</p>
</div>
<div class="formBar">
<ul><li><div class="buttonActive"><div class="buttonContent"><button type="submit"><s:text name="SubmitButtonLabel"/></button></div></div></li>
<li><div class="buttonActive"><div class="buttonContent"><button type="reset"><s:text name="ResetButtonLabel"/></button></div></div></li>
<li><div class="button"><div class="buttonContent"><button type="button" class="close"><s:text name="CancelButtonLabel"/></button></div></div></li></ul>
</div>
</s:form>
</div>
$(function(){
var config = "<s:text name="DwzConfigFile"/>";
DWZ.init(config, {
loginUrl:"../login.jsp", // 跳到登录页面
statusCode:{ok:200, error:300, timeout:301}, //【可选】
pageInfo:{pageNum:"pageNum", numPerPage:"numPerPage", orderField:"orderField", orderDirection:"orderDirection"}, //【可选】
debug:false, // 调试模式 【true|false】
callback:function(){
initEnv();
$("#themeList").theme({themeBase:"themes"}); // themeBase 相对于index页面的主题base路径
}
});
});
几张截图
扫一扫
477
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
