码迷,mamicode.com
首页 > 编程语言 > 详细

DWZ分页、排序失效小结

时间:2014-10-20 00:32:03      阅读:318      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   os   ar   for   strong   

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>

 

页面如下图所示:

bubuko.com,布布扣

 

分页或排序动作会调用到 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 }

 

这次在工作中,分页失效的主要原因就是没有将分页排序的几个相关的隐藏表单元素放在 id="pagerForm" 导致在第一个脚本方法中并没有获取到正确的 Jquery 对象 $parent ,从而传递到第二个方法时获取到的 form 变量值为 undefined 

DWZ分页、排序失效小结

标签:style   blog   http   color   io   os   ar   for   strong   

原文地址:http://www.cnblogs.com/ImaY/p/4036154.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!