首页 > 代码库 > 电子商务系统的设计与实现(十):DWZ框架与第三方分页组件整合
电子商务系统的设计与实现(十):DWZ框架与第三方分页组件整合
晚上,就是刚刚,在后端管理系统中使用DWZ框架。
先是,直接使用官网网站的Demo,dwz-jui,与编程语言无关的纯静态的那个原始项目。
很快就搭建好了左侧菜单,打开菜单后,出现Tab页面,然后显示目标页面的内容。
然后,就去关注表格分页部分。
DWZ自带的分页组件,感觉太麻烦了,一方面分页分成了4个部分显示,主要包括:
pagerForm,查询条件
pagerHeader,分页表格的头部
pagerContent,分页表格的正文
panleBar,分页条数栏目。
另一方面,分页html和JS中,需要显示后端的变量。
表格正文的list集合和分页参数都需要从后端,比如Java上下文变量中获取。见下面的例子:
先是,直接使用官网网站的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=http://www.mamicode.com/"${param.status}">>
因此,我不太想使用这个自带的分页。
以前,秒针某个同事写了分页组件,我改造了下,想今后自己维护一个版本。于是,在后端使用的是自己的分页组件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=http://www.mamicode.com/"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框架与第三方分页组件整合
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。