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

晚上，就是刚刚，在后端管理系统中使用DWZ框架。
先是，直接使用官网网站的Demo，dwz-jui，与编程语言无关的纯静态的那个原始项目。

很快就搭建好了左侧菜单，打开菜单后，出现Tab页面，然后显示目标页面的内容。

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

DWZ自带的分页组件，感觉太麻烦了，一方面分页分成了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>

因此，我不太想使用这个自带的分页。
以前，秒针某个同事写了分页组件，我改造了下，想今后自己维护一个版本。于是，在后端使用的是自己的分页组件fugrid.js。
但是，遇到了一个问题。要么是，自己的grid组件报错，要么是dwz的dwz.ui.js的initUI函数报错。
分析问题：
单独在新页面中，访问grid组件所在的页面，可以正常显示，说明代码是没有问题的。
使用自带的table，initUI函数也没有报错。

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

  try{

		initUI();

		}catch(e){

			console.warn(e);

		}

加上try-catch块，还是报错。难道是缓存？
<script src="static/framework/dwzjs/dwz.ui.js?a=1" type="text/javascript"></script>
加上一个a参数，防止缓存，发现还是报错。

换种方式：

function initUI(_box){

	var $p = $(_box || document);

	try {

	   $("div.panel", $p).jPanel();

       }catch(e){

			console.warn(e);

		}

}

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

不需要修改dwz的业务逻辑，不需要改动grid组件的代码。
如果dwz升级了，只需要升级之后，再增加捕获异常的代码就行了，不用去关心dwz组件的逻辑。

巴特西

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

最新文章

热门文章