[项目中学习]---avalon分页插件

来源:互联网 发布:ubuntu deb安装包下载 编辑:程序博客网 时间:2024/06/05 10:58
    分页插件和表格的使用很相似,都是给avalon封装好的插件赋值,然后事件驱动就可以了。
    我遇到的问题是,后台接口给我返回的是一个无分页的list集合,但是需求要求是分页显示。就类似淘宝中的查看订单对应的商品详情一样:

    那么这就用到了分页的插件,其实如果仔细看的话,就相当于把我常用的表格加分页的组合中,表格单独拿出来,分页单独拿出来。

在jsp页面上写这么一句:
<div class="text-right" ms-widget="pager,cgpager,$cgPagerOpts"></div>

然后在查询List的js方法上面加上对这个分页插件的控制,让list的总条数等于分页的总条数,让当前页等与分页的当前页:
pagerVM = avalon.vmodels.cgpager;        if(pagerVM){            data.limit = pagerVM.perPagers;            data.page = pagerVM.currentPage;        }//dataResult是查询到的数据pagerVM.totalItems = dataResult.totalCount; pagerVM.curentPage = dataResult.page;



return avalon.controller(function($ctrl) {                $ctrl.$onRendered = function(params) {            commentGoodsDetailController = avalon.define("commentGoodsDetailController", function(vm) {                    vm.$cgPagerOpts = {                        onJump : function(e, pagerVM) {                                                        // ,pagerVM为要页                            showList(data); // 重新加载数据                        },                        canChangePageSize : true,                        perPages : 5, // 默认每页条数                        options : [10, 20, 30, 50 ],                        showJumper : true,                         dropdown : {                            onChange : function(                                    newValue,                                    oldValue,                                    vmodel) {                                // 改变每页条数时触发                                avalon.vmodels.cgpager.pager.perPages = newValue;// 重置每页条数                                showList(data); // 重新加载数据                            }                        }                    }            });               avalon.scan();            setTimeout(function(){                showList();//查询数据的方法             },300)        }               $ctrl.$onEnter = function() {         }                  $ctrl.$onBeforeUnload = function() {            delete avalon.vmodels['commentGoodsDetailController'];        }                    $ctrl.$vmodels = []    }); }



然后再在jsp页面用ms-repeat来循环显示查询出的list中的数据就可以了。

最后推荐一个网站,里面有好多类似ms-repeat这样应用在页面的简单的函数以及使用例子:
http://www.cnblogs.com/rubylouvre/p/3181291.html

1 0
原创粉丝点击