[置顶]电子商务系统的设计与实现(十)：DWZ框架与第三方分页组件整合

概述晚上，就是刚刚，在后端管理系统中使用DWZ框架。先是，直接使用官网网站的Demo，dwz-jui，与编程语言无关的纯静态的那个原始项目。很快就搭建好了左侧菜单，打开菜单后，出现Tab页面，然后显示目标页面的内容。然后，就去关注表格分页部分。DWZ自带的分页组件，感觉太麻烦了，一方面分页分成了4个部分 @H_404_0@@H_404_0@ 晚上，就是刚刚，在后端管理系统中使用DWZ框架。
@H_404_0@ 先是@H_404_0@，直接使用官网网站的Demo，DWz-jui，与编程语言无关的纯静态的那个原始项目。
@H_404_0@
 很快就搭建好了左边菜单，打开菜单后，出现Tab页面，然后显示目标页面的内容。

 然后，就去关注表格分页部份。 

 DWZ自带的分页组件，感觉太麻烦了，1方面分页分成了4个部份显示，主要包括：
pagerForm，查询条件
pagerheader，分页表格的头部
pagerContent，分页表格的正文
panlebar，分页条数栏目。

另外一方面，分页HTML和Js中，需要显示后真个变量。
表格正文的List集合和分页参数都需要从后端，比如Java上下文变量中获得。见下面的例子： 
<form ID="pagerForm" method="post" action="demo_page1.HTML"> <input type="hIDden" name="status" value="${param.status}"> <input type="hIDden" name="keywords" value="${param.keywords}" /> <input type="hIDden" name="pageNum" value="1" /> <input type="hIDden" name="numPerPage" value="${model.numPerPage}" /> <input type="hIDden" name="orderFIEld" value="${param.orderFIEld}" /></form><div class="pageheader"> <form onsubmit="return navTabSearch(this);" action="demo_page1.HTML" method="post"> <div class="searchbar"> <table class="searchContent"> <tr> <td> 我的客户：<input type="text" name="keyword" /> </td> <td> <select class="comBox" name="province"> <option value="">所有省市</option> </select> </td> <td> 建档日期：<input type="text" class="date" Readonly="true" /> </td> </tr> </table> <div class="subbar"> <ul> <li><div class="buttonActive"><div class="buttonContent"><button type="submit">检索</button></div></div></li> </ul> </div> </div> </form></div><div class="pageContent"> <div class="panelbar"> <ul class="toolbar"> <li><a class="add" href="demo_page4.HTML" target="navTab"><span>添加</span></a></li> </ul> </div> <table class="table" wIDth="100%" layoutH="138"> <thead> <tr> <th wIDth="120">客户名称</th> </tr> </thead> <tbody> <tr target="sID_user" rel="1"> <td>天津农信社</td> </tr> </tbody> </table> <div class="panelbar"> <div class="pages"> <span>显示</span> <select class="comBox" name="numPerPage" onchange="navTabPageBreak({numPerPage:this.value})"> <option value="20">20</option> </select> <span>条，共${totalCount}条</span> </div> <div class="pagination" targettype="navTab" totalCount="200" numPerPage="20" pageNumShown="10" currentPage="1"></div> </div></div>
 
     因此，我不太想使用这个自带的分页。
     之前，秒针某个同事写了分页组件，我改造了下，想今后自己保护1个版本。因而，在后端使用的是自己的分页组件fugrID.Js。
但是，遇到了1个问题。 要末是，自己的grID组件报错，要末是DWz的DWz.ui.Js的initUI函数报错。
分析问题：
 单独在新页面中，访问grID组件所在的页面，可以正常显示，说明朝码是没有问题的。
 使用自带的table，initUI函数也没有报错。

继续分析：
  发现initUI方法会调用1些方法，@H_404_0@$("div.panel",$p).jPanel();然后提示某某没有jPanel方法，终究致使grID组件卡死了。@H_404_0@grID组件的代码，我不想修改，DWz组件的代码，还没有看懂，也不想修改，修改了今后升级就麻烦1些。
   我尝试了1种办法，既然是由于DWz报错致使grID组件1直卡死，如果捕获这个毛病了？
       

  try{		initUI();		}catch(e){			console.warn(e);		} 

@H_404_0@
 加上try-catch块，还是报错。难道是缓存？
<script src="static/framework/DWzJs/DWz.ui.Js?a=1" type="text/JavaScript"></script>
加上1个a参数，避免缓存，发现还是报错。

换种方式：
function initUI(_Box){ var $p = $(_Box || document); try { $("div.panel",$p).jPanel(); }catch(e){ console.warn(e); } }

@H_404_0@
在initUI方法内部，捕获这个异常，终究OK啦。

不需要修改DWz的业务逻辑，不需要改动grID组件的代码。
如果DWz升级了，只需要升级以后，再增加捕获异常的代码就好了，不用去关心DWz组件的逻辑。 @H_404_0@ 总结

以上是内存溢出为你收集整理的[置顶] 电子商务系统的设计与实现(十)：DWZ框架与第三方分页组件整合全部内容，希望文章能够帮你解决[置顶] 电子商务系统的设计与实现(十)：DWZ框架与第三方分页组件整合所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。