[專案中學習]---avalon分頁外掛
阿新 • • 發佈：2019-02-05
分頁外掛和表格的使用很相似，都是給avalon封裝好的外掛賦值，然後事件驅動就可以了。
我遇到的問題是，後臺介面給我返回的是一個無分頁的list集合，但是需求要求是分頁顯示。就類似淘寶中的檢視訂單對應的商品詳情一樣：
那麼這就用到了分頁的外掛，其實如果仔細看的話，就相當於把我常用的表格加分頁的組合中，表格單獨拿出來，分頁單獨拿出來。
在jsp頁面上寫這麼一句：
然後再在jsp頁面用ms-repeat來迴圈顯示查詢出的list中的資料就可以了。 最後推薦一個網站，裡面有好多類似ms-repeat這樣應用在頁面的簡單的函式以及使用例子：
<div class="text-right" ms-widget="pager,cgpager,$cgPagerOpts"></div>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這樣應用在頁面的簡單的函式以及使用例子：