DWZ的应用

001、点击链接添加局部div

Html代码

1. <a href="xxx.action?param1=x1&param1=2"
2. target="ajax" rel="ExchangeBox"><%=zw.getZwmc() %></a>

<a href="xxx.action?param1=x1&param1=2"   
     target="ajax" rel="ExchangeBox"><%=zw.getZwmc() %></a>

002、删除操作刷新局部div

Html代码

1. <!--自定义ajaxTodoDone函数-->
2. <script>
3. function ajaxTodoDone(backUrl,divID){
4. $("#"+divID).loadUrl(backUrl,'',function(){
5. $("#"+divID).find("[layoutH]").layoutH();
6. });
7. }
8. </script>
10. <a class="btnDel" title="确定要删除该用户吗？" target="ajaxTodo"
11. callback="ajaxTodoDone('xxx.action','divRel')"
12. href="xxx.action">删除</a>

<!--自定义ajaxTodoDone函数-->
<script>
function ajaxTodoDone(backUrl,divID){
    $("#"+divID).loadUrl(backUrl,'',function(){
                 $("#"+divID).find("[layoutH]").layoutH();
             });
} 
</script>

<a class="btnDel" title="确定要删除该用户吗？" target="ajaxTodo"  	 
   callback="ajaxTodoDone('xxx.action','divRel')" 		
   href="xxx.action">删除</a>      

003、form表单验证

Html代码

1. <form class="pageForm required-validate"
2. onsubmit="return submitForm(this,navTabAjaxDone);">
3. <input type="text" validateCallback
4. class="required date email url equalTo alphanumeric
5. lettersonly phone number digits accept postcode"
6. maxlength=""
7. minlength=""
8. max=""
9. min=""/>
10. </form>

<form class="pageForm required-validate" 
          οnsubmit="return submitForm(this,navTabAjaxDone);">
     <input type="text" validateCallback
           class="required date email url equalTo  alphanumeric 
                      lettersonly phone number digits accept postcode"
            maxlength=""
            minlength=""
           max=""
           min=""/>
</form> 

004、文件上传

1、利用jquery

Html代码

1. <script type="text/javascript">
2. $(document).ready(function() {
4. $("#uploadify").uploadify({
5. /*是组件自带的flash，用于打开选取本地文件的按钮 */
6. 'uploader' : 'uploadify/scripts/uploadify.swf',
7. 'script' : 'ssj/upLoad.action',
8. /*额外参数*/
9. 'scriptData':{ 'navTabId':'page41','callbackType':'closeCurrent',
10. 'ajax':'1','user.userid':'${user.userid}'
11. },
12. /*取消上传文件的按钮图片，就是个叉叉 */
13. 'cancelImg' : 'uploadify/cancel.png',
14. /*和input的name属性值保持一致就好，Struts2就能处理了*/
15. 'fileDataName' : 'file',
16. 'queueID' : 'fileQueue',
17. 'auto' : true,//是否选取文件后自动上传
18. 'multi' : false,//是否支持多文件上传
19. 'simUploadLimit' : 1,//每次最大上传文件数
20. 'queueSizeLimit' : 50,
21. 'removeCompleted' :false,
22. 'buttonImg':'uploadify/choose.png',
23. /*有speed和percentage两种，一个显示速度，一个显示完成百分比 */
24. 'displayData' : 'percentage',
25. /*如果配置了以下的'fileExt'属性，那么这个属性是必须的*/
26. 'fileDesc' : '*.bmp;*.gif;*.png;*.jpeg;*.jpg;*.pjpeg;*.x-png;',
27. /*允许的格式*/
28. 'fileExt' : '*.bmp;*.gif;*.png;*.jpeg;*.jpg;*.pjpeg;*.x-png;',
29. 'onComplete': function(event, queueID, fileObj,serverData,data) {
30. /* var json=eval(serverData);
31. dialogAjaxDone(serverData);*/
32. var json=eval('('+serverData+')');
33. dialogAjaxDone(json);
34. }
35. });
36. });
38. //function showResult() {//删除显示的上传成功结果
39. // $("#result").html("");
40. //}
41. function uploadFile() {//上传文件
42. jQuery('#uploadify').uploadifyUpload();
43. }
44. function clearFile() {//清空所有上传队列
45. jQuery('#uploadify').uploadifyClearQueue();
46. }
47. </script>
49. <div style=" text-align:left; padding-left:20px;padding-top:5px;">
50. <div id="fileQueue"></div>
51. <input type="file" name="file" id="uploadify"/>
52. </div>

<script  type="text/javascript">
$(document).ready(function() {  
	
$("#uploadify").uploadify({  
 /*是组件自带的flash，用于打开选取本地文件的按钮  */
     'uploader' : 'uploadify/scripts/uploadify.swf',
     'script' : 'ssj/upLoad.action',
 /*额外参数*/     
    'scriptData':{  'navTabId':'page41','callbackType':'closeCurrent',
                        'ajax':'1','user.userid':'${user.userid}'
                     }, 
/*取消上传文件的按钮图片，就是个叉叉 */
   'cancelImg' : 'uploadify/cancel.png',
/*和input的name属性值保持一致就好，Struts2就能处理了*/
    'fileDataName' : 'file',
        'queueID' : 'fileQueue',  
        'auto' : true,//是否选取文件后自动上传  
        'multi' : false,//是否支持多文件上传  
        'simUploadLimit' : 1,//每次最大上传文件数  
        'queueSizeLimit' : 50,  
        'removeCompleted' :false,  
        'buttonImg':'uploadify/choose.png',
/*有speed和percentage两种，一个显示速度，一个显示完成百分比  */
        'displayData' : 'percentage',
/*如果配置了以下的'fileExt'属性，那么这个属性是必须的*/  
        'fileDesc' : '*.bmp;*.gif;*.png;*.jpeg;*.jpg;*.pjpeg;*.x-png;',
/*允许的格式*/   
        'fileExt' : '*.bmp;*.gif;*.png;*.jpeg;*.jpg;*.pjpeg;*.x-png;',
        'onComplete': function(event, queueID, fileObj,serverData,data) {
           /* var json=eval(serverData);
           dialogAjaxDone(serverData);*/
           var json=eval('('+serverData+')');
           dialogAjaxDone(json);
         }       
    });  
});  

//function showResult() {//删除显示的上传成功结果  
//  $("#result").html("");  
//}  
function uploadFile() {//上传文件  
    jQuery('#uploadify').uploadifyUpload();  
}  
function clearFile() {//清空所有上传队列  
    jQuery('#uploadify').uploadifyClearQueue();  
}  
</script>

<div style=" text-align:left; padding-left:20px;padding-top:5px;">               
                <div id="fileQueue"></div>                    
                <input type="file" name="file" id="uploadify"/>
 </div> 

2、dwz 的iframeCallback();

Html代码

1. <form method="post"
2. action="Exchange_addQyexchange.action?
3. navTabId=page51&callbackType=closeCurrent&ajax=1"
4. class="pageForm required-validate" onSubmit="return
5. iframeCallback(this, navTabAjaxDone);"
6. enctype="multipart/form-data">
7. <input type="file" name="file" />
8. </form>

<form method="post"  
           action="Exchange_addQyexchange.action?
           navTabId=page51&callbackType=closeCurrent&ajax=1"  
           class="pageForm required-validate" onSubmit="return 
           iframeCallback(this, navTabAjaxDone);" 
           enctype="multipart/form-data">
    <input type="file" name="file" />
</form>

005、刷新navTab

form提交刷新

Html代码

1. <form method="post"
2. action="Exchange_modefyInfo.action?
3. navTabId=page51& callbackType=closeCurrent"
4. class="pageForm required-validate"
5. onsubmit="return validateCallback(this, navTabAjaxDone);" >

<form method="post" 
          action="Exchange_modefyInfo.action?
           navTabId=page51& callbackType=closeCurrent" 
          class="pageForm required-validate" 
          οnsubmit="return validateCallback(this, navTabAjaxDone);" >

链接<a>提交刷新

Html代码

1. <a title="您确定要删除么?" target="ajaxTodo" href="xxx.action" class="btnDel" >删除</a>

<a title="您确定要删除么?" target="ajaxTodo" href="xxx.action" class="btnDel" >删除</a> 

006、日历插件

调整日历选择范围

Js代码

1. /*dwz.datepicker.js*/
2. var Datepicker = function(sDate, opts) {
3. this.opts = $.extend({
4. pattern:'yyyy-MM-dd',
5. yearstart:-80,
6. yearend:10
7. }, opts);
8. this.sDate = sDate.trim();
9. }

/*dwz.datepicker.js*/
	var Datepicker = function(sDate, opts) {
		this.opts = $.extend({
			pattern:'yyyy-MM-dd',
			yearstart:-80,
			yearend:10
		}, opts);		
		this.sDate = sDate.trim();
	} 

007、弹窗传值

008、列表翻页

翻页工具类Pager.java

Java代码

1. //翻页工具类Pager
2. import java.io.Serializable;
3. public class Pager implements Serializable{
4. //用来标记是navTab上的分页还是dialog上的分页
5. private String targetType;
6. //总条数
7. private Integer totalCount;
8. //每页显示多少条
9. private Integer numPerPage;
10. // 页标数字多少个
11. private Integer pageNumShown;
12. //当前是第几页
13. private Integer currentPage;
14. public Pager(){this.numPerPage = 10;}
16. public Pager(String targetType,Integer totalCount,Integer numPerPage,
17. Integer pageNumShown,Integer currentPage){
18. this.targetType = targetType;
19. this.totalCount = totalCount;
20. this.numPerPage = numPerPage;
21. this.pageNumShown = pageNumShown;
22. this.currentPage = currentPage;
23. }
25. public String getTargetType() {
26. return targetType;}
28. public void setTargetType(String targetType) {
29. this.targetType = targetType;}
31. public Integer getTotalCount() {
32. return totalCount;}
33. public void setTotalCount(Integer totalCount) {
34. this.totalCount = totalCount;}
36. public Integer getNumPerPage() {
37. return numPerPage;}
39. public void setNumPerPage(Integer numPerPage) {
40. this.numPerPage = numPerPage;}
42. public Integer getPageNumShown() {
43. return pageNumShown;}
45. public void setPageNumShown(Integer pageNumShown) {
46. this.pageNumShown = pageNumShown;}
48. public Integer getCurrentPage() {
49. return currentPage;}
51. public void setCurrentPage(Integer currentPage) {
52. this.currentPage = currentPage;}
54. }

//翻页工具类Pager
import java.io.Serializable;
public class Pager implements Serializable{	
	//用来标记是navTab上的分页还是dialog上的分页
	private String targetType;	
	//总条数
	private Integer totalCount;	
	//每页显示多少条
	private Integer numPerPage;	
	// 页标数字多少个
	private Integer pageNumShown;	
	//当前是第几页
	private Integer currentPage;		
	public Pager(){this.numPerPage = 10;}
	
	public Pager(String targetType,Integer totalCount,Integer numPerPage,
                             Integer pageNumShown,Integer currentPage){
		this.targetType = targetType;
		this.totalCount = totalCount;
		this.numPerPage = numPerPage;
		this.pageNumShown = pageNumShown;
		this.currentPage = currentPage;
	}
	
	public String getTargetType() {
		return targetType;}

	public void setTargetType(String targetType) {
		this.targetType = targetType;}

	public Integer getTotalCount() {
		return totalCount;}
	public void setTotalCount(Integer totalCount) {
		this.totalCount = totalCount;}

	public Integer getNumPerPage() {
		return numPerPage;}

	public void setNumPerPage(Integer numPerPage) {
		this.numPerPage = numPerPage;}

	public Integer getPageNumShown() {
		return pageNumShown;}

	public void setPageNumShown(Integer pageNumShown) {
		this.pageNumShown = pageNumShown;}

	public Integer getCurrentPage() {
		return currentPage;}

	public void setCurrentPage(Integer currentPage) {
		this.currentPage = currentPage;}
	
}

翻页工具类SplitPageUtil.java

Java代码

1. public class SplitPageUtil
2. {
3. public static String getLimitStr(Pager page){
5. StringBuffer pagingSelect = new StringBuffer();
7. //获取起始页行
8. int startCount = 0;
9. if(page.getCurrentPage() == 1){
10. startCount = 0;
11. }else{
12. startCount = (page.getCurrentPage()-1)*page.getNumPerPage();
13. }
15. //取的数据行数
16. pagingSelect.append(" LIMIT ");
17. pagingSelect.append(startCount+","+page.getNumPerPage());
18. return pagingSelect.toString();
19. }
20. }

public class SplitPageUtil
{	  
	  public static String getLimitStr(Pager page){
		  
	   StringBuffer pagingSelect = new StringBuffer();
		    
		  //获取起始页行
		    int startCount = 0;		    
		    if(page.getCurrentPage() == 1){
		    	startCount = 0;
		    }else{
		    	startCount = (page.getCurrentPage()-1)*page.getNumPerPage();
		    }
		    
		    //取的数据行数
		    pagingSelect.append(" LIMIT ");
		    pagingSelect.append(startCount+","+page.getNumPerPage());
		    return pagingSelect.toString();
	  }
} 

业务逻辑 Action

Java代码

1. //注入分页属性
2. private Pager pager;
3. private String pageNum;
4. public String showList()
5. {
6. //获取前台参数
7. String param= getRequest().getParameter("xxx");
8. //保存前台参数
9. getRequest().setAttribute("begin", begin);
11. Map<String, Object> map = new HashMap<String, Object>();
12. //设置查询条件
13. map.put("xxx",xxx);
14. // 分页信息设置
15. String numPerPage = request.getParameter("numPerPage");
17. if(pager == null){
18. pager = new Pager();
19. }
21. if(pageNum != null && !"".equals(pageNum)){
22. pager.setCurrentPage(Integer.valueOf(pageNum));
23. }else{
24. pager.setCurrentPage(1);
25. }
27. if(numPerPage != null && !"".equals(numPerPage)){
28. pager.setNumPerPage(Integer.valueOf(numPerPage));
29. }
30. String split = SplitPageUtil.getLimitStr(pager);
31. map.put("split", split);//limit start,end
32. //获得实体list
33. //获得count
34. pager.setTotalCount(count);
35. return SUCCESS;
36. }

//注入分页属性
private Pager pager;
private String pageNum;
public String showList()
	{
               //获取前台参数
              String param= getRequest().getParameter("xxx");           
              //保存前台参数 
              getRequest().setAttribute("begin", begin);
		
		Map<String, Object> map = new HashMap<String, Object>();
                //设置查询条件
                map.put("xxx",xxx);          
              // 分页信息设置
             String numPerPage = request.getParameter("numPerPage");
		
		if(pager == null){
			pager = new Pager();
		}
		
		if(pageNum != null && !"".equals(pageNum)){
			pager.setCurrentPage(Integer.valueOf(pageNum)); 
		}else{
			pager.setCurrentPage(1); 
		}
		
		if(numPerPage != null && !"".equals(numPerPage)){
			pager.setNumPerPage(Integer.valueOf(numPerPage)); 
		}
		String split = SplitPageUtil.getLimitStr(pager);
		map.put("split", split);//limit start,end
		//获得实体list
                //获得count
               pager.setTotalCount(count);
		return SUCCESS;
	}

Jsp代码

1. <!--翻页form-->
2. <form id="pagerForm" οnsubmit="return navTabSearch(this);"
3. action="xxx.action" method="post">
4. <input type="hidden" name="pageNum" value="1" />
5. <input type="hidden" name="numPerPage" value="${pager.numPerPage}" />
6. <!--自定义参数值-->
7. </form>
8. <!--翻页条-->
9. <div class="panelBar" >
10. <div class="pages">
11. <span>显示</span>
12. <select name="numPerPage" οnchange="navTabPageBreak({numPerPage:this.value})">
13. <s:iterator value="{10,20,50}" var="s" status="a">
14. <s:if test="#s==pager.numPerPage">
15. <option value="${s}" selected="selected">${s}</option>
16. </s:if>
17. <s:else>
18. <option value="${s}">${s}</option>
19. </s:else>
20. </s:iterator>
21. </select>
23. <span>共${pager.totalCount}条</span>
24. </div>
25. <div class="pagination" targetType="navTab"
26. totalCount="${pager.totalCount}" numPerPage="${pager.numPerPage}"
27. pageNumShown="10" currentPage="${pager.currentPage}"></div>
28. </div>

<!--翻页form-->	
 <form id="pagerForm" οnsubmit="return navTabSearch(this);" 
            action="xxx.action" method="post">
	<input type="hidden" name="pageNum" value="1" />
	<input type="hidden" name="numPerPage" value="${pager.numPerPage}" />   
         <!--自定义参数值-->    
</form>
<!--翻页条-->
     <div class="panelBar" >  
		<div class="pages">  
			<span>显示</span>  
			<select name="numPerPage" οnchange="navTabPageBreak({numPerPage:this.value})"> 
				<s:iterator value="{10,20,50}" var="s" status="a">
					<s:if test="#s==pager.numPerPage">
						<option value="${s}" selected="selected">${s}</option>
					</s:if>
					<s:else>
						<option value="${s}">${s}</option>
					</s:else>
				</s:iterator>
			</select>
			
			<span>共${pager.totalCount}条</span>
		</div>
		<div class="pagination" targetType="navTab" 
                        totalCount="${pager.totalCount}" numPerPage="${pager.numPerPage}" 
                        pageNumShown="10" currentPage="${pager.currentPage}"></div>
	</div>

009、结构树

010、打开新navTab

Html代码

1. <a class="btnEdit" title="修改用户信息" target="navTab" rel="editUserInfo" href="xxx.action">修改</a>

<a class="btnEdit"  title="修改用户信息" target="navTab" rel="editUserInfo" href="xxx.action">修改</a> 

011、打开dialog

Html代码

1. <a class="btnEdit" title="修改用户信息" target="dialog"
2. rel="dialogEditUserInfo" href="xxx.action">修改</a>

<a class="btnEdit"  title="修改用户信息" target="dialog" 
     rel="dialogEditUserInfo" href="xxx.action">修改</a> 

012、弹出提示框

Js代码

1. alertMsg.info("请选择需要完工的订单!");

alertMsg.info("请选择需要完工的订单!");

013、 翻页

Xml代码

1. dwz：dialog翻页
2. <!-- 分页 -->
3. <div class="panelBar" >
4. <div class="pages">
5. <span>显示</span>
6. <select name="numPerPage" onchange="dialogPageBreak({numPerPage:this.value})">
7. <c:forEach begin="10" end="40" step="10" varStatus="s">
8. <option value="${s.index}" ${pager.numPerPage eq s.index ? 'selected="selected"' : ''}>${s.index}</option>
9. </c:forEach>
10. </select>
12. <span>共${pager.totalCount}条</span>
13. </div>
14. <div class="pagination" targetType="dialog" totalCount="${pager.totalCount}" numPerPage="${pager.numPerPage}" pageNumShown="1" currentPage="${pager.currentPage}"></div>
15. </div>

dwz：dialog翻页
	<!-- 分页 -->
	<div class="panelBar" >  
		<div class="pages">  
			<span>显示</span>  
			<select name="numPerPage" οnchange="dialogPageBreak({numPerPage:this.value})"> 
				<c:forEach begin="10" end="40" step="10" varStatus="s">
					<option value="${s.index}" ${pager.numPerPage eq s.index ? 'selected="selected"' : ''}>${s.index}</option>
				</c:forEach>
			</select>
			
			<span>共${pager.totalCount}条</span>
		</div>
		<div class="pagination" targetType="dialog" totalCount="${pager.totalCount}" numPerPage="${pager.numPerPage}" pageNumShown="1" currentPage="${pager.currentPage}"></div>
	</div>

015、navTab 局部翻页

Xml代码

1. <form rel="pagerForm" onsubmit="return divSearch(this,'cust_Box');" action="<%=basePath%>view/cust/search" method="post">
2. <!-- 分页 -->
3. <div class="panelBar" >
4. <div class="pages">
5. <span>显示</span>
6. <select name="numPerPage" onchange="navTabPageBreak({numPerPage:this.value},'cust_Box')">
7. <c:forEach begin="10" end="40" step="10" varStatus="s">
8. <option value="${s.index}" ${pager.numPerPage eq s.index ? 'selected="selected"' : ''}>${s.index}</option>
9. </c:forEach>
10. </select>
12. <span>共${pager.totalCount}条</span>
13. </div>
14. <div class="pagination" rel="cust_Box" totalCount="${pager.totalCount}" numPerPage="${pager.numPerPage}" pageNumShown="10" currentPage="${pager.currentPage}"></div>
15. </div>