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

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

问题1：分页控件中选择后跳转至初始页。
问题分析：将鼠标放到的数字中，url会显示：http://localhost:8080/项目名/#，于是跟踪代码，在dwz.combox.js中,有下面一段代码影响了全局：

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

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

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

问题2：分页控件中选择后，显示的数字不变。
解决方法：将分页控件的代码修改如下

<div class="pages">  
            <span>显示</span>  
            <select class="combox" name="numPerPage" onchange="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" onchange="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框架中，表格的单元格中多嵌套了一层

，无论如何使用”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;”

问题6：pagerForm冲突。
在打开两个有搜索条件的navTab时，对第二个navTab进行添加操作后自动刷新列表的话，刷出来的结果是第一个navTab的内容。
解决办法，搜索条件的form使用ajax方式提交，如下：

$('#uploadForm').ajaxSubmit({
        type: "POST",
        dataType: "json",
        url: "images/saveImages?editType=${editType}&resKey=${resKey}",
        success: function (data) {
            DWZ.ajaxDone(data);
            divSearch($(".imagesForm"), "${resKey}");
            $.pdialog.closeCurrent();
        },
        error: DWZ.ajaxError
    });

返回正常后使用divSearch($(".imagesForm"), "${resKey}");进行页面刷新，其中$(".imagesForm")是条件form的对象，原框架是直接调用this，但是这个问题里面这样做会导致多个pagerForm冲突，所以将id=“pagerForm”再加一个属性为 class=”imagesForm”。使用jQuery的类选择器来精确传递这个form对象来解决冲突问题。如下：

<form id="pagerForm" class="imagesForm" method="GET" action="${resAction}" onsubmit="return divSearch(this,'${resKey}');">
    <input type="hidden" name="pageNum" value="${page.currentPage}" />
    <input type="hidden" name="numPerPage" value="${page.numPerPage}" />
    <input type="hidden" name="type" value="${type}" />
</form>

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

猜你喜欢