文档章节

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

FansUnion
 FansUnion
发布于 2015/05/03 01:30
字数 874
阅读 70
收藏 2
 晚上,就是刚刚,在后端管理系统中使用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组件的逻辑。 

© 著作权归作者所有

FansUnion
粉丝 60
博文 858
码字总数 825464
作品 0
丰台
高级程序员
私信 提问
Ajax开发视频教材

视频下载地址: http://dwz.duqn.com/doc/dwz-ajax-develop.swf ajax 表单提交、分页组件 大家在使用DWZ框架过程中遇到问题最多的也是ajax表单提交处理流程、分页组件问题。本教材主要是讲解...

张慧华
2010/05/16
1K
1
介绍几个常用的jquery ui框架

jQuery ui框架很多,除了官方提供的jquery UI(如果你还不知道什么是jQuery UI,请看下载了jquery ui后如何使用),还有很多第三方提供的ui框架,因官方提供的jquery ui框架体积较大,所以很多...

一念三千
2012/10/16
0
0
介绍几个常用的jquery ui框架

jQuery ui框架很多,除了官方提供的jquery UI,还有很多第三方提供的ui框架,因官方提供的jquery ui框架体积较大,所以很多人都不喜欢用,但不论是官方提供还是第三方提供,他们都是基于jqu...

Junn
2012/12/05
0
2
symfony3的中文视频教程更新中(原创),对SF感兴趣的童鞋可以看下

本课程总共通过《实战》《淬炼》《大师》,三个子课程来详细的讲解Symfony3框架。实战篇主要通过一个用户文章管理系统使学员初步掌握SF3应用的开发技能。淬炼通过通过一个大型的B2C电子商务网...

翁宇杰
2016/07/20
1K
0
DWZ富客户端框架v1.1.1版本发布

DWZ富客户端框架v1.1.1 增加当前navTab中链接ajax post扩展功能navTabTodo 修复dialog在IE下托动,dialog中内容自动全选问题 修复tree组件折叠图标bug 修复当前navTab上分页通用方法navTabP...

张慧华
2010/04/29
717
0

没有更多内容

加载失败,请刷新页面

加载更多

以太坊中文文档翻译-区块

本文原文链接 点击这里获取Etherscan API 中文文档(完整版) 完整内容排版更好,推荐读者前往阅读。 区块(Blocks) 区块相关的 API,接口的参数说明请参考Etherscan API 约定, 文档中不单独...

Tiny熊
24分钟前
1
0
Linux 内核的一个问题

是virtio 驱动,但是没有启动 virtio-mmio virtio-mmio.0: Failed to enable 64-bit or 32-bit DMA. Trying to continue, but this might not work.....[ 1.047924] md: ... autorun......

MtrS
48分钟前
2
0
MySQL主从配置

17.1 MySQL主从介绍 17.2 准备工作 17.3 配置主 17.4 配置从 17.5 测试主从同步 一、 MySQL主从介绍

tobej
58分钟前
2
0
读书replay《博弈与社会》.1.20190526

前情 《美丽心灵》,一部讲数学家约翰·福布斯·纳什的电影,我第一次听到博弈理论就是在这部电影里。看过电影之后就一直想知道,博弈论究竟讲了什么。很久之后,20190417这天,我刷JD的购物...

wanxiangming
今天
2
0
iOS TableView层级结构剖析

首先上图 下面来分析一下tableView的层级结构 tableView的组成: 1.整个tableView有且仅有一个头部和尾部就是tableViewHeadView和tableViewFooterView2.tableView 可以有多个section,一个s...

HOrange
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部