dwz 分页实现过程
1.官方文档说明:
分页组件库
开发人员只要用程序动态生成这个 参数说明: 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">
]]> **本人建议不要修改,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(),便可达到效果。 以上为小可的一点总结,希望可以帮到大家,也希望可以留言交流。