程序员人生 网站导航

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

栏目:htmlcss时间:2015-01-10 08:13:51
 晚上,就是刚刚,在后端管理系统中使用DWZ框架。
 先是,直接使用官网网站的Demo,dwz-jui,与编程语言无关的纯静态的那个原始项目。

 很快就搭建好了左边菜单,打开菜单后,出现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些方法,$("div.panel", $p).jPanel();然后提示某某没有jPanel方法,终究致使grid组件卡死了。grid组件的代码,我不想修改,dwz组件的代码,还没有看懂,也不想修改,修改了今后升级就麻烦1些。
   我尝试了1种办法,既然是由于dwz报错致使grid组件1直卡死,如果捕获这个毛病了?
       
  try{
		initUI();
		}catch(e){
			console.warn(e);
		} 



 加上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); } }



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

不需要修改dwz的业务逻辑,不需要改动grid组件的代码。
如果dwz升级了,只需要升级以后,再增加捕获异常的代码就好了,不用去关心dwz组件的逻辑。 
------分隔线----------------------------
------分隔线----------------------------

最新技术推荐