`

DWZ分页组件详解

阅读更多

dwz 分页实现过程

1.官方文档说明

分页组件库

<div class="pagination" targetType="navTab" totalCount="200" numPerPage="20" pageNumShown="10" currentPage="1"></div>

开发人员只要用程序动态生成这个<div>, 不用写js, 框架自动绑定处理事件。

 

参数说明:

targetType: navTab或dialog,用来标记是navTab上的分页还是dialog上的分页

 

totalCount: 总条数         

 

numPerPage: 每页显示多少条

 

pageNumShown: 页标数字多少个

 

currentPage: 当前是第几页

 

2.参数修改的介绍

 官方文档只说明了基本的几个参数,可能不适合自己的系统,因此有时需要进行修改框架代码,修改如下:

 1) dwz.ui.js 文档中需要修改264行,

 

 $("div.pagination", $p).each(function(){

var $this = $(this);

$this.pagination({

targetType:$this.attr("targetType"),

rel:$this.attr("rel"),

totalCount:$this.attr("totalCount"),

numPerPage:$this.attr("numPerPage"),

pageNumShown:$this.attr("pageNumShown") || 10,

currentPage:$this.attr("currentPage"),

 

lastShow:$this.attr("lastShow") //这是我自己修改的一个参数,仅供参考

});

});

 

2) 参数的值获取以及使用

  dwz.pagination.js 文档中修改的地方:

  

  2-1) var Pagination = function(opts) {

this.opts = $.extend({

targetType:"navTab",// navTab, dialog

rel:"", //用于局部刷新div id号

totalCount:0,

numPerPage:10,

pageNumShown:10,

currentPage:1,

 

lastShow:1,//是否显示末页 1:显示  这是我测试的参数

 

callback:function(){return false;}

}, opts);

}

 2-2) 获取dwz.ui.js中添加参数的值的地方

   $.extend(Pagination.prototype, {

targetType:function(){return this.opts.targetType},

//省略其他参数的获取...

 

lastShow:function(){return this.opts.lastShow} //获取参数设置

});

 本文档参数的应用就得自己使用了。

 

 3) 分页代码的固定格式 

  dwz.frag.xml 文档定义了dwz框架的组件结构,其中分页的结构如下:

  <!-- dwz.pagination -->

<_PAGE_ id="pagination"><![CDATA[

<ul>

<li class="j-first">

<a class="first" href="javascript:;"><span>首页</span></a>

<span class="first"><span>首页</span></span>

</li>

<li class="j-prev">

<a class="previous" href="javascript:;"><span>上一页</span></a>

<span class="previous"><span>上一页</span></span>

</li>

#pageNumFrag#

<li class="j-next">

<a class="next" href="javascript:;"><span>下一页</span></a>

<span class="next"><span>下一页</span></span>

</li>

<li class="j-last">

<a class="last" href="javascript:;"><span>末页</span></a>

<span class="last"><span>末页</span></span>

</li>

<li class="jumpto"><input class="textInput" type="text" size="4" value="#currentPage#" /><input class="goto" type="button" value="确定" /></li>

</ul>

]]></_PAGE_>

 

**本人建议不要修改,js中获取这些片段的代码 :DWZ.frag["pagination"] 则获取的就是上述dom结构

若需要修改,我们可以添加新的片段来进行改写。

 

4)点击分页重要的方法

点击分页栏的按钮事件定义如下:

function _bindEvent($target, pageNum, targetType, rel){

$target.bind("click", {pageNum:pageNum}, function(event){

dwzPageBreak({targetType:targetType, rel:rel, data:{pageNum:event.data.pageNum}});

event.preventDefault();

});

}

其中关键代码 dwzPageBreak (位于dwz.ajax.js中)

 

ps:若一个画面中存在多个分页组件,会导致存在冲突,解决办法:给每个分页table设置div的id属性

如果通过js动态生成分页组件,则需要生成上述的dom结构,这样浏览器是不会解析为正常的格式,此时需要通过dwz的组件渲染方法initUI(),便可达到效果。

 

以上为小可的一点总结,希望可以帮到大家,也希望可以留言交流。

 

 

分享到:
评论

相关推荐

    dwz学习实例

    DWZ内置了分页组件,可以轻松设置每页显示的数量,以及当前页、总页数等信息。通过Ajax请求,用户可以在不同页间切换,同时保持页面其他内容不变,提供良好的浏览体验。 主页面布局是构建应用的骨架,DWZ提供了一套...

    dwz框架官网实例

    **DWZ框架详解** DWZ,全称是“Design for Web Zen”,是一个基于Ajax技术的开源JavaScript框架,专为Web应用程序设计,旨在提高用户体验和开发效率。DWZ框架结合了前端UI设计和后端交互,提供了丰富的组件和便捷的...

    DWZ编程框架

    **DWZ编程框架详解** DWZ(Design for Web Zen)是一个基于JavaScript的开源前端开发框架,主要用于构建富互联网应用程序(RIA)。它集成了各种前端技术和工具,如Ajax、jQuery、UI设计、表单验证等,旨在提高Web...

    jqgird dwz 框架扩展

    **jqGrid和DWZ框架扩展详解** 在Web开发领域,jqGrid和DWZ框架是两个常用的工具,它们分别用于数据展示和页面构建。本篇文章将深入探讨如何在DWZ框架中扩展jqGrid,以及如何利用它们实现JSON数据的初始化加载。 **...

    dwz实例demo

    【DWZ框架详解】 DWZ,全称是“Design for Web Zen”,是一个基于Ajax的开源JavaScript框架,专门用于构建富互联网应用(Rich Internet Applications,简称RIA)。它集成了UI组件、Ajax、表单验证、页面导航、数据...

    dwz的Demo和chm使用手册

    通过这些Demo,你可以直观地了解如何使用DWZ的导航栏、表单、对话框、分页、树形结构等组件。每个示例都配有详细的注释,解释了实现特定功能的关键代码,这对于初学者来说非常有帮助。同时,你可以直接在浏览器中...

    dwz富客户端框架

    2. **表格**:框架内建的表格组件支持动态加载数据、排序、过滤、分页等功能,可与后台服务无缝对接。 3. **表单**:DWZ的表单组件支持各种表单元素,如输入框、下拉框、复选框等,并提供验证功能,确保数据的完整...

    DWZ使用帮助文档

    - **如何自定义DWZ分页参数**: 通过修改配置文件或在代码中指定参数来实现。 - **如何关闭loading**: 在适当的时机调用关闭loading的方法。 - **DWZ局部刷新**: 通过Ajax请求局部更新DOM节点。 - **DWZ版本升级**: ...

    dwz使用文档

    **DWZ框架详解** DWZ,全称是“Design Without ZIndex”,是一个基于Ajax的开源JavaScript框架,主要用于构建富客户端的Web应用。DWZ提供了一整套UI组件和交互效果,使得开发者能够快速构建出美观且用户体验良好的...

    dwz-user-guide.rar_dwz

    **DWZ富客户端框架详解** DWZ,全称为“Dynamic Web Zone”,是一个基于JavaScript和Ajax技术的开源富客户端框架,专为Java Web后端管理界面设计。它旨在提供一套高效、易用、功能丰富的前端解决方案,使开发者可以...

    dwz-ria.rar_dwz

    **DWZ RIA框架详解** DWZ全称为“Design Without Zones”,是一款优秀的开源Web应用程序框架,专注于富互联网应用(Rich Internet Application,简称RIA)的开发。这个名为“dwz-ria.rar_dwz”的压缩包包含了DWZ...

    dwz-user-guide.zip_dwz_work

    **DWZ工作框架详解** DWZ(Dynamic Web Zone)是一个基于JavaScript和Ajax的开源富Web应用框架,专门设计用于构建高效、易用的Web界面。它以用户交互体验为核心,提供了一整套完善的功能组件和解决方案,使得开发者...

    dwz.rar_asp DWZ_dwz

    【DWZ框架与ASP应用详解】 DWZ框架是一款基于AJAX技术的开源前端UI解决方案,主要应用于Web应用程序的用户界面设计。"DWZ.rar_asp DWZ_dwz"标题表明这是DWZ框架的一个版本,特别适用于ASP(Active Server Pages)...

    DWZ后台框架源码!!!!

    表格操作是DWZ处理数据展示和交互的主要方式,框架内建了强大的表格组件,支持分页、排序、过滤、行操作等。同时,表格与服务器的数据交互通过Ajax实现,用户可以实时查看和编辑数据,无需刷新整个页面。 菜单导航...

    dwz+struts 框架

    2. **分页显示**:DWZ框架内置了分页组件,只需要配置相应的参数,就可以实现前端页面的动态分页。在Struts后端,通过计算总记录数和每页显示数量,生成分页信息。 3. **框架搭建**:搭建DWZ+Struts项目,首先需要...

    DWZ 富客户端框架使用手册.pdf

    - **如何自定义DWZ分页参数**:通过修改配置文件中的相关参数来实现自定义分页功能。 - **如何关闭loading**:可以在调用Ajax请求时设置loading属性为false,来禁用加载动画。 - **DWZ局部刷新**:使用特定的Ajax...

    DWZ富客户端框架,使用教程

    - **dwz.pagination.js**:分页组件。 - **dwz.database.js**:数据库操作辅助。 - **dwz.datepicker.js**:日期选择器。 - **dwz.combox.js**:下拉选择框组件。 - **dwz.checkbox.js**:复选框组件。 - **...

Global site tag (gtag.js) - Google Analytics