[置頂] 電子商務(wù)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)(十)：DWZ框架與第三方分頁(yè)組件整合
來(lái)源：程序員人生 發(fā)布時(shí)間：2015-01-10 08:13:51 閱讀次數(shù)：3123次
晚上，就是剛剛，在后端管理系統(tǒng)中使用DWZ框架。 先是，直接使用官網(wǎng)網(wǎng)站的Demo，dwz-jui，與編程語(yǔ)言無(wú)關(guān)的純靜態(tài)的那個(gè)原始項(xiàng)目。
很快就搭建好了左邊菜單，打開(kāi)菜單后，出現(xiàn)Tab頁(yè)面，然后顯示目標(biāo)頁(yè)面的內(nèi)容。
然后，就去關(guān)注表格分頁(yè)部份。
DWZ自帶的分頁(yè)組件，感覺(jué)太麻煩了，1方面分頁(yè)分成了4個(gè)部份顯示，主要包括：
pagerForm，查詢條件
pagerHeader，分頁(yè)表格的頭部
pagerContent，分頁(yè)表格的正文
panleBar，分頁(yè)條數(shù)欄目。
另外一方面，分頁(yè)html和JS中，需要顯示后真?zhèn)€變量。
表格正文的list集合和分頁(yè)參數(shù)都需要從后端，比如Java上下文變量中獲得。見(jiàn)下面的例子：
<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>天津農(nóng)信社</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>
因此，我不太想使用這個(gè)自帶的分頁(yè)。
之前，秒針某個(gè)同事寫(xiě)了分頁(yè)組件，我改造了下，想今后自己保護(hù)1個(gè)版本。因而，在后端使用的是自己的分頁(yè)組件fugrid.js。
但是，遇到了1個(gè)問(wèn)題。 要末是，自己的grid組件報(bào)錯(cuò)，要末是dwz的dwz.ui.js的initUI函數(shù)報(bào)錯(cuò)。
分析問(wèn)題：
單獨(dú)在新頁(yè)面中，訪問(wèn)grid組件所在的頁(yè)面，可以正常顯示，說(shuō)明朝碼是沒(méi)有問(wèn)題的。
使用自帶的table，initUI函數(shù)也沒(méi)有報(bào)錯(cuò)。
繼續(xù)分析：
發(fā)現(xiàn)initUI方法會(huì)調(diào)用1些方法，
$("div.panel", $p).jPanel();然后提示某某沒(méi)有jPanel方法，終究致使grid組件卡死了。grid組件的代碼，我不想修改，dwz組件的代碼，還沒(méi)有看懂，也不想修改，修改了今后升級(jí)就麻煩1些。
我嘗試了1種辦法，既然是由于dwz報(bào)錯(cuò)致使grid組件1直卡死，如果捕獲這個(gè)毛病了？
try{
initUI();
}catch(e){
console.warn(e);
}
加上try-catch塊，還是報(bào)錯(cuò)。難道是緩存？
<script src="static/framework/dwzjs/dwz.ui.js?a=1" type="text/javascript"></script>
加上1個(gè)a參數(shù)，避免緩存，發(fā)現(xiàn)還是報(bào)錯(cuò)。
換種方式：
function initUI(_box){
var $p = $(_box || document);
try {
$("div.panel", $p).jPanel();
}catch(e){
console.warn(e);
}
}
在initUI方法內(nèi)部，捕獲這個(gè)異常，終究OK啦。
不需要修改dwz的業(yè)務(wù)邏輯，不需要改動(dòng)grid組件的代碼。
如果dwz升級(jí)了，只需要升級(jí)以后，再增加捕獲異常的代碼就好了，不用去關(guān)心dwz組件的邏輯。
生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
