先是，直接使用官网网站的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组件的逻辑。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
