DWZ分页、排序失效小结

浏览数：32 / 时间：2015年06月08日

1. 在视图文件中与分页相关的代码段

1 <form id="pagerForm" method="post" action="w_list.html">
2     <input type="hidden" name="pageNum" value="1" />
3     <input type="hidden" name="numPerPage" value="<%= Model.numPerPage %>" />
4     <input type="hidden" name="orderField" value="<%= param.orderField %>" />
5     <input type="hidden" name="orderDirection" value="<%= param.orderDirection %>" />
6 </form>

 1 <div class="panelBar" >
 2         <div class="pages">
 3             <span>显示</span>
 4             <select name="numPerPage" onchange="navTabPageBreak({numPerPage:this.value})">
 5                 <option value="20">20</option>
 6                 <option value="50">50</option>
 7                 <option value="100">100</option>
 8                 <option value="200">200</option>
 9             </select>
10             <span>条，共200条</span>
11         </div>
12         
13         <div class="pagination" targetType="navTab" totalCount="200" numPerPage="20" pageNumShown="10" currentPage="2"></div>
14 
15     </div>
16 
17 </div>

页面如下图所示：

分页或排序动作会调用到 dwz.ajax.js 中的两个关键脚本方法：

 1 /**
 2  * 处理navTab中的分页和排序
 3  * targetType: navTab 或 dialog
 4  * rel: 可选 用于局部刷新div id号
 5  * data: pagerForm参数 {pageNum:"n", numPerPage:"n", orderField:"xxx", orderDirection:""}
 6  * callback: 加载完成回调函数
 7  */
 8 
 9 function dwzPageBreak(options){
10     var op = $.extend({ targetType:"navTab", rel:"", data:{pageNum:"", numPerPage:"", orderField:"", orderDirection:""}, callback:null}, options);　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　// 参数rel来自于上面第二段代码13行的一个可选属性，用于指定当一个页面内存在有多个表单时，分页操作作用的对象

11     var $parent = op.targetType == "dialog" ? $.pdialog.getCurrent() : navTab.getCurrentPanel(); 
　　　　　　　　　　　　　　　　　　　　// 获取到的 $parent 对象为包含 id=“pagerForm” 的 Form 表单
12 
13     if (op.rel) {
14         var $box = $parent.find("#" + op.rel);
15         var form = _getPagerForm($box, op.data);
16         if (form) {
17             $box.ajaxUrl({
18                 type:"POST", url:$(form).attr("action"), data: $(form).serializeArray(), callback:function(){
19                     $box.find("[layoutH]").layoutH();
20                 }
21             });
22         }
23     } else {
24         var form = _getPagerForm($parent, op.data);
25         var params = $(form).serializeArray();
26         
27         if (op.targetType == "dialog") {
28             if (form) $.pdialog.reload($(form).attr("action"), {data: params, callback: op.callback});
29         } else {
30             if (form) navTab.reload($(form).attr("action"), {data: params, callback: op.callback});
31         }
32     }
33 }

 1 /**
 2  * 
 3  * @param {Object} args {pageNum:"",numPerPage:"",orderField:"",orderDirection:""}
 4  * @param String formId 分页表单选择器，非必填项默认值是 "pagerForm"
 5  */
 6 function _getPagerForm($parent, args) {
 7     var form = $("#pagerForm", $parent).get(0);
 8 
 9     if (form) {
10         if (args["pageNum"]) form[DWZ.pageInfo.pageNum].value = args["pageNum"];
11         if (args["numPerPage"]) form[DWZ.pageInfo.numPerPage].value = args["numPerPage"];
12         if (args["orderField"]) form[DWZ.pageInfo.orderField].value = args["orderField"];
13         if (args["orderDirection"] && form[DWZ.pageInfo.orderDirection]) form[DWZ.pageInfo.orderDirection].value = args["orderDirection"];
14     }
15     
16     return form;
17 }