[项目中学习]---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
- [项目中学习]---avalon分页插件
- avalon分页插件
- 项目中学习---通过例子学习avalon
- 项目中学习---avalon表格渲染函数的了解
- avalon学习笔记(1) avalon+oniui+ajax实现smartgrid的无刷新分页
- Avalon学习
- Avalon学习
- WebStrom中项目avalon框架中vm赋值的问题?
- avalon 学习资料
- avalon.js学习笔记
- 关于avalon学习地址
- avalon学习资料
- avalon学习资料
- avalon中ms-duplex
- avalon
- avalon学习笔记(五)
- 【基础学习】Avalon-ST接口协议
- 前端MVVM框架avalon学习笔记
- 【Oracle】导出与导入数据
- linux下I2C驱动架构全面分析
- PHP安全-隐藏PHP
- linux sed命令详解
- 【例题】【三分套三分】NKOJ2644 【SCOI2010 DAY2】传送带
- [项目中学习]---avalon分页插件
- 程序1031
- GIT简介和svn的区别
- LeetCode - Unique Paths
- SpringMVC处理Date成员对象报400 Bad Request解决办法
- C语言学习心得(一)
- Docker学习笔记(五)之attach与logs命令
- cs224d课程Lecture1总结
- Greendao 3.2一步步教你到使用,看完必会(附Demo)