分頁列表框架(四)
分頁列表的介面適配
上面學習了易用強大的分頁列表,支援分頁的後端介面使用的是筋斗雲的規範,返回列表像這樣:
{
list: [
{field1: "val1", field2: "val2"},
{field1: "val3", field2: "val4"},
],
nextkey: 2
}
上面用list欄位返回列表。另外還支援一種等價的壓縮表格式,使用h(表頭)/d(資料)陣列,如下:
{
h: [ "field1","field2" ],
d: [ ["val1","val2"], ["val3","val4"], ... ]
nextkey: 2
}
返回列表如果沒到最後一頁,需要返回nextkey欄位,用於請求下一頁時的"_pagekey"引數。 請求通過"_pagesz"引數指定頁大小,通過"_pagekey"引數取下一頁。
如果你遇到的後端分頁列表介面設計不符合上述規則,則需要通過介面適配來使用分頁列表框架,即讓返回資料符合上面的規範,一般是設定好list/nextkey欄位,或者是h/d/nextkey欄位。
[任務]
後端分頁機制為(jquery-easyui datagrid分頁機制):
- 請求時通過引數page, rows分別表示頁碼,頁大小,如
page=1&rows=20
- 返回資料通過欄位total表示總數, rows表示列表資料,如
{ total: 83, rows: [ {...}, ... ] }
要求通過介面適配,不變動前面列表頁面orders2的程式碼,讓該頁面仍能正常工作。
我們先來製作一下模擬資料,在mockdata.js中,修改"Ordr.query"部分:
"Ordr.query": function (param, postParam) {
var arr = orders;
var ret = {total: arr.length, rows: []};
var pagesz = param.rows || 20;
var pagekey = param.page || 1;
for (var n=0, i=(pagekey-1)*pagesz; n<pagesz && i<arr.length; ++n, ++i) {
ret.rows.push(arr[arr.length-i-1]);
}
return [0, ret];
},
這樣就可以模擬了,試試
callSvrSync("Ordr.query");
callSvrSync("Ordr.query", {page: 2, rows: 10});
注意:上面返回資料的基本格式仍然是筋斗雲框架的格式,即成功返回[0, 資料]
,失敗返回[錯誤碼,錯誤資訊]
。
如果不是這樣的格式,請閱讀前面介紹過的“介面適配”章節去配置MUI.callSvrExt
。
在app.js中設定為initPageList設定預設選項:
$.extend(initPageList.options, {
pageszName: "rows",
pagekeyName: "page",
// 設定 data.list, data.nextkey (如果是最後一頁則不要設定); 注意pagekey可以為空
onGetData: function (data, pagesz, pagekey) {
data.list = data.rows;
if (pagekey == null)
pagekey = 1;
if (data.total > pagesz * pagekey)
data.nextkey = pagekey + 1;
}
});
在onGetData回撥中,設定data.list及data.nextkey屬性(如果是最後一頁則不要設定)。
注意:app.js與index.js的區別是,前者適用於專案下的所有應用,而index.js只是index.html這個H5應用的主程式。
配置後,專案下所有列表都將應用這個適配規則。如果只是個別列表適配需要調整,可以在呼叫initPageList時指定這些選項,如:
var listItf = initPageList(jpage, {
...
pageszName: 'rows',
pagekeyName: 'page',
onGetData: ...
});
考慮這樣一種情況,後端就返回一個列表如[ {...}, {...} ]
,不支援分頁,那麼是否可以使用分頁列表?
答案是仍然可用,initPageList支援一個純陣列,它將被當成列表的最後一頁處理,無法上拉載入,但仍支援下拉重新整理。
相關文章
- 分頁列表框架框架
- 分頁列表框架(二)框架
- 分頁列表框架(三)框架
- 如果走框架在同一頁面裡實現多個列表的分頁查詢框架
- 列表元件抽象(4):滾動列表及分頁說明元件抽象
- ThinkPhp框架:分頁查詢PHP框架
- YII2.0框架分頁框架
- 小程式列表頁上滑載入更多配合 Laravel 分頁Laravel
- yii框架ajax分頁的使用框架
- Oracle分頁查詢語句(四)Oracle
- 帝國cms怎樣修改列表分頁函式函式
- Python如何優化列表介面進行分頁Python優化
- 列表元件抽象(3):分頁和排序管理說明元件抽象排序
- SSH框架下的分頁查詢框架
- Tp框架實現好看分頁效果框架
- ssh框架中的分頁查詢框架
- CI框架內建分頁程式碼框架
- 【MyBatis框架】MyBatis實現物理分頁和邏輯(記憶體)分頁MyBatis框架記憶體
- SSM框架實現分頁查詢例子SSM框架
- SAP UI5 列表控制元件分頁顯示資料時,如何自定義分頁大小UI控制元件
- ES系列(四):http請求分發框架解析HTTP框架
- Rust Web框架列表RustWeb框架
- UI框架收藏列表UI框架
- JDBC【資料庫連線池、DbUtils框架、分頁】JDBC資料庫框架
- 在SSH框架下按條件分頁查詢框架
- (八)列表頁開發
- keep-alive + vuex + mint + Infinite scroll 儲存分頁列表資料Keep-AliveVue
- springboot3+vue3(六)文章列表條件分頁(PageHelper)Spring BootVue
- 從後端到前端之Vue(四)小試牛刀——真實專案的應用(樹、tab、資料列表和分頁)後端前端Vue
- 四個類搞定分層自動化測試框架框架
- mysql分頁-limit offset分頁MySqlMIT
- [提問交流]請問列表頁呼叫article:page標籤如何實現分頁樣式定製.
- AntDesignBlazor示例——建立列表頁Blazor
- day02_品優購電商專案_02_前端框架AngularJS入門 + 品牌列表的實現 + 品牌列表分頁的實現 + 增加/修改/刪除品牌的實現 + 品牌分頁條件查詢的實現_用心筆記前端框架AngularJS筆記
- 分頁總頁數計算方法 所有分頁通用
- list列表運算子,列表元素的遍歷,列表的方法,生成列表,巢狀的列表|python自學筆記(四)巢狀Python筆記
- ReactNative開發城市列表頁React
- 詳情頁返回列表頁恢復滾動位置