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