DWZ的应用

001、点击链接添加局部div

<a  href="xxx.action?param1=x1&param1=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

<!--自定义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>

<!--自定义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表单验证

<form  class="pageForm required-validate"
          onsubmit="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>

<form class="pageForm required-validate" 
          onsubmit="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

<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>

<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();

<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>

<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提交刷新

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

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

链接<a>提交刷新

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

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

006、日历插件

调整日历选择范围

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

/*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

//翻页工具类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;}

}

//翻页工具类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

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();
      }
}

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

//注入分页属性
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;
    }

//注入分页属性
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;
	}

<!--翻页form-->
<form id="pagerForm" onsubmit="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" onchange="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>

<!--翻页form-->	
 <form id="pagerForm" onsubmit="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" onchange="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

<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

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

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

012、弹出提示框

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

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

013、 翻页

dwz：dialog翻页
    <!-- 分页 -->
    <div  class="panelBar" >
        <div class="pages">
            <span>显示</span>
            <select name="numPerPage" onchange="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>

dwz：dialog翻页
	<!-- 分页 -->
	<div class="panelBar" >  
		<div class="pages">  
			<span>显示</span>  
			<select name="numPerPage" onchange="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 局部翻页

<form  rel="pagerForm" onsubmit="return divSearch(this,'cust_Box');" action="<%=basePath%>view/cust/search" method="post">
    <!-- 分页 -->
    <div  class="panelBar" >
        <div class="pages">
            <span>显示</span>
            <select name="numPerPage" onchange="navTabPageBreak({numPerPage:this.value},'cust_Box')">
                <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" rel="cust_Box" totalCount="${pager.totalCount}" numPerPage="${pager.numPerPage}" pageNumShown="10" currentPage="${pager.currentPage}"></div>
    </div>