DWZ框架分页控件中遇到的问题

由于本文的老版编辑器阅读体验不好，已经将内容更新到这里，敬请移步：

http://blog.csdn.net/bcqtt/article/details/53909322

现在进行一个项目，后台用的是dwz框架，真的是很不错的框架，大大提高了效率。在使用过程中遇到一些小问题，在此记录下来，作为积累吧。

问题1：分页控件中<select><option>选择后跳转至初始页。

问题分析：将鼠标放到<option>的数字中，url会显示：http://localhost:8080/项目名/#，于是跟踪代码，在dwz.combox.js中,有下面一段代码影响了全局：

$("option", $this).each(function(){
<span style="white-space:pre">	</span>var option = $(this);
<span style="white-space:pre">	</span>options +="<li><a class=\""+ (value==option[0].value?"selected":"") +"\" href=\"#\" value=\"" + option[0].value + "\">" + option[0].text + "</a></li>";
});

解决方法：修改上面这段代码如下

$("option", $this).each(function(){
<span style="white-space:pre">	</span>var option = $(this);
<span style="white-space:pre">	</span>ptions +="<li><a class=\""+ (value==option[0].value?"selected":"") +"\" href=\"javascript:void;\" value=\"" + option[0].value + "\">" + option[0].text + "</a></li>";
});

问题2：分页控件中<select><option>选择后，显示的数字不变。

        解决方法：将分页控件的代码修改如下

<div class="pages">
			<span>显示</span>
			<select class="combox" name="numPerPage" οnchange="navTabPageBreak({numPerPage:this.value})">
				<option value="10">10</option>
				<option value="20">20</option>
				<option value="50">50</option>
				<option value="100">100</option>
				<option value="200">200</option>
			</select>
			<strong><script>
		        $("select[name='numPerPage']").val('${page.numPerPage}');
		    </script></strong>
			<span>条，共${page.totalCount}条</span>
		</div>

问题3：分页控件中点击下一页，或者点击分页数，或者跳转至指定页码，都会返回到登录页（用到了SpringSecurity），或者无效

问题分析：在列表页面有个form id="pagerForm"，配置相应的action即可，解决方法如下

<form id="pagerForm" <strong>method="GET"</strong> action="<strong>account/queryAccountPaper</strong>">
	<input type="hidden" name="pageNum" value="${page.currentPage}" />
	<input type="hidden" name="numPerPage" value="${page.numPerPage}" />
</form>

这里的method,要用GET，否则，后台会报 405 request method post not supported，我用到了SpringMVC才报这个吧估计,debug之后得出如下解决方法。

        解决方法：修改dwz.ajax.js的dwzPageBreak()方法，在方法最后又这么一行

if (form) navTab.reload($(form).attr("action"), {data: params, callback: op.callback});

修改为：

if (form) navTab.reload($(form).attr("action"), {data: params, callback: op.callback},$(form).attr("method"));

reload()方法加了一个参数$(form).attr("method")，就是form的属性method。传进去就要使用它，接着修改dwz.navTab.js的 reload()，加一个参数 method，并使用，修改后的代码如下：

reload: function(url, options,method){
		var op = $.extend({data:{}, navTabId:"", callback:null}, options);
		var $tab = op.navTabId ? this._getTab(op.navTabId) : this._getTabs().eq(this._currentIndex);
		var $panel =  op.navTabId ? this.getPanel(op.navTabId) : this._getPanels().eq(this._currentIndex);
		
		if ($panel){
			if (!url) {
				url = $tab.attr("url");
			}
			if (url) {
				if ($tab.hasClass("external")) {
					navTab.openExternal(url, $panel);
				} else {
					if ($.isEmptyObject(op.data)) { //获取pagerForm参数
						var $pagerForm = $("#pagerForm", $panel);
						op.data = $pagerForm.size()>0 ? $pagerForm.serializeArray() : {}
					}
					
					$panel.ajaxUrl({
						type:method, url:url, data:op.data, callback:function(response){
							navTab._loadUrlCallback($panel);
							if ($.isFunction(op.callback)) op.callback(response);
						}
					});
				}
			}
		}
	},

问题4：弹出的Diolag中的操作无法刷新列表的问题

处理方法：

在dwz.ajax.js中的dialogAjaxDone方法下入如下方法

/*在对话框中操作数据，并刷新对话框*/
function dialogAjaxDoneFather(json) {
	DWZ.ajaxDone(json);
	if (json.statusCode == DWZ.statusCode.ok) {
		if (json.navTabId) {
			var dialog = $("body").data(json.navTabId);
			$.pdialog.reload(dialog.data("url"), { data: {}, dialogId: json.navTabId, callback: null })
		}
		if ("closeCurrent" == json.callbackType) {
			$.pdialog.closeCurrent();
		}
	}
}

调用方式如下：

<a class="delete" href="adCls/deleteAdCls?resKey=ad_classify_manage&id={id_adc}" targetType="dialog" target="selectedTodo" callback="dialogAjaxDoneFather" rel="ids" title="确实要删除所选记录吗?"  ><span>删除</span></a>

分页时调用方式如下：

<select class="combox" name="numPerPage" οnchange="dialogPageBreak({numPerPage:this.value})">
				<option value="10">10</option>
				<option value="20">20</option>
				<option value="50">50</option>
				<option value="100">100</option>
				<option value="200">200</option>
			</select>

<div class="pagination" targetType="dialog" totalCount="${page.totalCount}" numPerPage="${page.numPerPage}" pageNumShown="5" currentPage="${page.currentPage}"></div>

问题5：更新了最新版的DWZ框架table中的值死活不能断行。

在最新版的dwz框架中，表格的单元格中多嵌套了一层<div>，无论如何使用"word-break:break-all;"都无效。只能去改源码了。

处理方法：在dwz.stable.js中找到这行：

if (nowrapTD != "false") $ftd.html("<div>" + $ftd.html() + "</div>");

吧包裹的div去掉，改为：

if (nowrapTD != "false") $ftd.html($ftd.html());

这样，在页面中就可以使用 "word-break:break-all;"