DWZ使用问题解析02

1、Table排序问题

dwz排序是后台排序，不是前台的js排序，具体流程和搜索，分页是一样的，当你点击排序的按钮时，重新发送请求刷新当前的navTable和dialog。

<th width="60" align="center" orderField="accountLevel"></th>
在table头中指定要排序的字段，点击排序按钮时就会把这个orderField 值发送过去，并且还会发送一个orderDirection（asc desc）值，根据orderField值判断排序属性字段，根据orderDirection 判断排序方式，这样你就知道如何写sql重新查找了。

大体原理和分页，搜索是一样的，orderField ，orderDirection 变量名称是活的，可以在初始dwz时指定：

pageInfo:{pageNum:"pageNum", numPerPage:"numPerPage", orderField:"orderField", orderDirection:"orderDirection"},

2、navTabPageBreak流程

此处以表格控件的分页显示数量为例(dwz-ria-1.4.3)：

流程如下：

1、分页的Combox控件的onchange事件触发navTabPageBreak。

2、navTabPageBreak 实质上是调用的dwzPageBreak 方法。

dwzPageBreak方法说明如下：

/**
 * 处理navTab中的分页和排序
 * @param args {pageNum:"n", numPerPage:"n", orderField:"xxx", orderDirection:""}
 * @param rel： 可选 用于局部刷新div id号
 */
function navTabPageBreak(args, rel){
        //实质上调用的 dwzPageBreak 方法，dwzPageBreak是对navTab和dialog通用一个方法
	dwzPageBreak({targetType:"navTab", rel:rel, data:args});
}

/**
 * 处理navTab中的分页和排序
 * targetType: navTab 或 dialog
 * rel: 可选 用于局部刷新div id号
 * data: pagerForm参数 {pageNum:"n", numPerPage:"n", orderField:"xxx", orderDirection:""}
 * callback: 加载完成回调函数
 */
 //这个方法是重点
 function dwzPageBreak(options){
        //这里设置一些默认是属性
	var op = $.extend({ targetType:"navTab", rel:"", data:{pageNum:"", numPerPage:"", orderField:"", orderDirection:""}, callback:null}, options);
        //获取默认的父容器，一般就是当前的dialog和当的navTab
        var $parent = op.targetType == "dialog" ? $.pdialog.getCurrent() : navTab.getCurrentPanel();
        //这里是局部的刷新，流程就是通过Ajax请求获取到新的html片段，替换掉指定的id (op.rel)节点，然后从新格式化布局。
	if (op.rel) {
		var $box = $parent.find("#" + op.rel);
                //获取当前页面的查询form 下面会重点讲解
		var form = _getPagerForm($box, op.data);
		if (form) {
                        //获取新的html片段，替换掉原始的。
			$box.ajaxUrl({  //获取查询表单里参数，所以刷新页面时表表单数据是一并发过去的 
				type:"POST", url:$(form).attr("action"), data: $(form).serializeArray(), callback:function(){
                                        //重新格式化布局
					$box.find("[layoutH]").layoutH();
				}
			});
		}
         //刷新整个 navTab、或者 dialog
         } else {
             //获取当前页面的查询form 下面会重点讲解
             var form = _getPagerForm($parent, op.data);
            //获取查询表单里参数，所以刷新页面时表表单数据是一并发过去的 
            var params = $(form).serializeArray();
            //通过各个reload方法可以刷新
            if (op.targetType == "dialog") {
                if (form) $.pdialog.reload($(form).attr("action"), {data: params, callback: op.callback});
            }else{
               if (form)  navTab.reload($(form).attr("action"), {data: params, callback: op.callback});
            }
         }
}
/**
 * 
 * @param {Object} args {pageNum:"",numPerPage:"",orderField:"",orderDirection:""}
 * @param String formId 分页表单选择器，非必填项默认值是 "pagerForm"
 */
//dwzPageBreak 方法调用这个方法 
function _getPagerForm($parent, args) {
         //获取当前页面下查询Form节点
         //#pagerForm Id 名字很重要 如果传递不了参数，可以检查一下 ID 名称       
        var form = $("#pagerForm", $parent).get(0);
	if (form) {
                //在这里会把你传递的参数附上。
		if (args["pageNum"]) form[DWZ.pageInfo.pageNum].value = args["pageNum"];
                //<select class="" οnchange="navTabPageBreak({numPerPage:this.value})" name="numPerPage"> 
                //在这里附上值，从而达到你切换数量时刷新页面的效果
		if (args["numPerPage"]) form[DWZ.pageInfo.numPerPage].value = args["numPerPage"];
		if (args["orderField"]) form[DWZ.pageInfo.orderField].value = args["orderField"];
		if (args["orderDirection"] && form[DWZ.pageInfo.orderDirection]) form[DWZ.pageInfo.orderDirection].value = args["orderDirection"];
	}
	return form;
}

3、NavTab刷新分析

 navTab的刷新在doc文件里也有说明，首先在form表单里指定好回调函数：

* <form action="/user.do?method=save" οnsubmit="return validateCallback(this, navTabAjaxDone)">
  
   如果不指定回调函数的话框架会默认使用DWZ.ajaxDone()

<div class="dp-highlighter bg_html"><div class="bar"><div class="tools"><b>[html]</b> <a href="#" class="ViewSource" title="view plain" οnclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view plain</a><a href="#" class="CopyToClipboard" title="copy" οnclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">copy</a><a href="#" class="PrintSource" title="print" οnclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print</a><a href="#" class="About" title="?" οnclick="dp.sh.Toolbar.Command('About',this);return false;">?</a><div style="position: absolute; left: 0px; top: 0px; width: 0px; height: 0px; z-index: 99;"><embed id="ZeroClipboardMovie_2" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="0" height="0" name="ZeroClipboardMovie_2" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=2&width=0&height=0" wmode="transparent"></div></div></div><ol start="1" class="dp-xml"><li class="alt"><span><span>function navTabAjaxDone(json){  </span></span></li><li class=""><span>  </span></li><li class="alt"><span>      DWZ.ajaxDone(json);  </span></li><li class=""><span>     //注意返回的JSON的数据结构  </span></li><li class="alt"><span>      if (<span class="attribute">json.statusCode</span><span> == DWZ.statusCode.ok){  </span></span></li><li class=""><span>            if (json.navTabId){   </span></li><li class="alt"><span>                  //把指定navTab页面标记为需要“重新载入”。注意navTabId不能是当前navTab页面的  </span></li><li class=""><span>                  navTab.reloadFlag(json.navTabId);  </span></li><li class="alt"><span>  </span></li><li class=""><span>            } else {   </span></li><li class="alt"><span>                   //重新载入当前navTab页面  </span></li><li class=""><span>                  navTabPageBreak();  </span></li><li class="alt"><span>  </span></li><li class=""><span>            }  </span></li><li class="alt"><span>            if ("closeCurrent" == json.callbackType) {  </span></li><li class=""><span>  </span></li><li class="alt"><span>                  setTimeout(function(){navTab.closeCurrentTab();}, 100);  </span></li><li class=""><span>  </span></li><li class="alt"><span>            } else if ("forward" == json.callbackType) {  </span></li><li class=""><span>  </span></li><li class="alt"><span>                  navTab.reload(json.forwardUrl);  </span></li><li class=""><span>  </span></li><li class="alt"><span>            }  </span></li><li class=""><span>  </span></li><li class="alt"><span>      }  </span></li><li class=""><span>  </span></li><li class="alt"><span>}  </span></li><li class=""><span>  </span></li><li class="alt"><span>  </span></li><li class=""><span>框架的回调函数使用在dialog，navTab 上  如果有特殊的需求可以自己写个Ajax实现在回调函数中 使用   navTabPageBreak() ; 就可以刷新当前的navTab   </span></li><li class="alt"><span>当然也可以实现局部刷新 相见 navTabPageBreak() ;  dwzPageBreak() 函数说明  </span></li></ol></div><pre name="code" class="html" style="display: none;">function navTabAjaxDone(json){

      DWZ.ajaxDone(json);
     //注意返回的JSON的数据结构
      if (json.statusCode == DWZ.statusCode.ok){
            if (json.navTabId){ 
                  //把指定navTab页面标记为需要“重新载入”。注意navTabId不能是当前navTab页面的
                  navTab.reloadFlag(json.navTabId);

            } else { 
                   //重新载入当前navTab页面
                  navTabPageBreak();

            }
            if ("closeCurrent" == json.callbackType) {

                  setTimeout(function(){navTab.closeCurrentTab();}, 100);

            } else if ("forward" == json.callbackType) {

                  navTab.reload(json.forwardUrl);

            }

      }

}


框架的回调函数使用在dialog，navTab 上  如果有特殊的需求可以自己写个Ajax实现在回调函数中 使用   navTabPageBreak() ; 就可以刷新当前的navTab 
当然也可以实现局部刷新 相见 navTabPageBreak() ;  dwzPageBreak() 函数说明
</pre><p></p>
<pre></pre>
<p></p>

4、DWZ主题切换

DWZ主题文件夹下有相应的主题包，只需要在点击不同主题时，切换到不同的样式表目录，整个网页主题就会改变：

如果使用iframe的话，由于iframe不受DWZ框架的影响，故改变DWZ样式时iframe里的样式不会发生改变。

5、修正Tab选项卡多次加载的问题

dwz 1.4.3 选项卡使用j-ajax 动态加载时，每次切换都会进行加载，大多数情况不是很实用，做了一下简单的修改，对于页面只加载一次。

修改前：

	var jGroup = jGroups.eq(iTabIndex);
		if (this.href) jGroup.loadUrl(this.href,{},function(){
		jGroup.find("[layoutH]").layoutH();
	});

修改后：

	var jGroup = jGroups.eq(iTabIndex);
	         if (this.href && !jGroup.attr("loaded")) jGroup.loadUrl(this.href,{},function(){
		 jGroup.find("[layoutH]").layoutH();
		 jGroup.attr("loaded",true);
	});

原理很简单，就是加个标志，如果已经加载过则不加载，否则加载并修改标志。

6、根据Id刷新dialog

原始dialog有刷新方法，但reload:function(url, options)，但不是根据id来刷新，下面简单封装根据Id刷新Dialog：

reloadDialog:function(dialogId){
			var dialog = $("body").data(dialogId);
			if(dialog){
				$.pdialog.reload(dialog.data("url"),{dialogId:dialogId});
			}
		},

把该方法放到 dwz-dialog.js 中就行了。

7、NavTab,Dialog,Title设置问题

NavTab,Dialog设置，源码如下：

// navTab
	$("a[target=navTab]", $p).each(function(){
		$(this).click(function(event){
			var $this = $(this);
                        //这里是获取Tile
                        var title = $this.attr("title") || $this.text();
                        //这里是获取Id
                        var tabid = $this.attr("rel") || "_blank";
			var fresh = eval($this.attr("fresh") || "true");
			var external = eval($this.attr("external") || "false");
			var url = unescape($this.attr("href")).replaceTmById($(event.target).parents(".unitBox:first"));
			DWZ.debug(url);
			if (!url.isFinishedTm()) {
				alertMsg.error($this.attr("warn") || DWZ.msg("alertSelectMsg"));
				return false;
			}
			navTab.openTab(tabid, url,{title:title, fresh:fresh, external:external});

			event.preventDefault();
		});
	});

<li><a href="createRepairs.jsp" target="navTab" rel="main">创建报修单</a></li>

这个是创建 NavTab的链接 。首先获取a的title，如果没有指定的话获取a的text内容。rel指定节点的id，用于在表单回调函数，关闭或刷新，是navTab等部件的唯一标识。title是节点提示信息。

以后遇到问题再更新，上面主要参考自：http://blog.csdn.net/jiweigang1?viewmode=contents