DWZ分页组件详解

本文详细介绍了DWZ框架中的分页组件使用方法,包括官方文档的参数说明、参数的修改、分页代码的固定格式以及点击分页事件的处理。文中提到的lastShow参数是作者自行添加的,用于控制是否显示末页。对于多分页组件的情况,建议为每个分页设置唯一的ID以避免冲突。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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(),便可达到效果。

 

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

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值