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> 
9.  
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() {   
3.      
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. });   
37.  
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> 
48.  
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;} 
15.      
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.     } 
24.      
25.     public String getTargetType() { 
26.         return targetType;} 
27.  
28.     public void setTargetType(String targetType) { 
29.         this.targetType = targetType;} 
30.  
31.     public Integer getTotalCount() { 
32.         return totalCount;} 
33.     public void setTotalCount(Integer totalCount) { 
34.         this.totalCount = totalCount;} 
35.  
36.     public Integer getNumPerPage() { 
37.         return numPerPage;} 
38.  
39.     public void setNumPerPage(Integer numPerPage) { 
40.         this.numPerPage = numPerPage;} 
41.  
42.     public Integer getPageNumShown() { 
43.         return pageNumShown;} 
44.  
45.     public void setPageNumShown(Integer pageNumShown) { 
46.         this.pageNumShown = pageNumShown;} 
47.  
48.     public Integer getCurrentPage() { 
49.         return currentPage;} 
50.  
51.     public void setCurrentPage(Integer currentPage) { 
52.         this.currentPage = currentPage;} 
53.      
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){ 
4.            
5.        StringBuffer pagingSelect = new StringBuffer(); 
6.              
7.           //获取起始页行 
8.             int startCount = 0;          
9.             if(page.getCurrentPage() == 1){ 
10.                 startCount = 0; 
11.             }else{ 
12.                 startCount = (page.getCurrentPage()-1)*page.getNumPerPage(); 
13.             } 
14.              
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); 
10.          
11.         Map<String, Object> map = new HashMap<String, Object>(); 
12.                 //设置查询条件 
13.                 map.put("xxx",xxx);           
14.               // 分页信息设置 
15.              String numPerPage = request.getParameter("numPerPage"); 
16.          
17.         if(pager == null){ 
18.             pager = new Pager(); 
19.         } 
20.          
21.         if(pageNum != null && !"".equals(pageNum)){ 
22.             pager.setCurrentPage(Integer.valueOf(pageNum));  
23.         }else{ 
24.             pager.setCurrentPage(1);  
25.         } 
26.          
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> 
22.              
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> 
11.              
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> 
11.              
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>