DWZ分页组件详解

电玩女神 2022-04-06 02:56 389阅读 0赞

**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框架的组件结构，其中分页的结构如下：

<\_PAGE\_ id="pagination"><!\[CDATA\[

<ul>

</li>

</li>

\#pageNumFrag\#

</li>

</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分页组件详解

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 vue分页组件封装

相关 Java/SSH分页组件

相关 FreeMarker分页组件监听器

相关 vue实现一个分页组件

相关 Vue实现分页组件

相关工具类分页组件

相关 ElementUI分页组件+Vue

相关 DWZ分页组件详解

相关 elementui分页组件的使用

相关 DWZ tab选项卡共用页面分页组件刷新不起作用、失效问题