基於 SAP UI5 JSONModel 客戶端模型的列表分頁顯示(Table Pagination)前提試讀版

i042416發表於2022-06-06
UIJSON客戶端模型

一套適合 SAP UI5 初學者循序漸進的學習教程

作者簡介

Jerry Wang，2007 年從電子科技大學計算機專業碩士畢業後加入 SAP 成都研究院工作至今。Jerry 是 SAP 社群導師，SAP 中國技術大使。在長達 15 年的 SAP 標準產品開發生涯裡，Jerry 曾經先後參與 SAP Business ByDesign, SAP CRM, SAP Cloud for Customer, SAP S/4HANA, SAP Commerce Cloud(電商雲)等標準產品的研發工作。

Jerry 工作中使用 ABAP, Java, JavaScript 和 TypeScript 進行開發, 對包括 SAP UI5 在內的多款 SAP 自研框架有深入的研究。

教程目錄

說明

Jerry 從 2014 年加入 SAP成都研究院 CRM Fiori 開發團隊之後開始接觸 SAP UI5，曾經在 SAP 社群和“汪子熙”微信公眾號上發表過多篇關於 SAP UI5 工作原理和原始碼解析的文章。

在 Jerry 這篇文章 對 SAP UI5 一無所知的新手，從哪些材料開始學習比較好？ 曾經提到，Jerry 也是從 SAP UI5 菜鳥一路走過來，深知只有 ABAP 開發背景的開發者，向 SAP UI5 開發領域轉型的不易，因此我在業餘時間設計了這份適合 SAP UI5 初學者的學習教程，把開發一個完整的 SAP UI5 應用的流程，拆分成若干個步驟，力求每個步驟裡，把涉及到的知識點都涵蓋到。這些知識點可能不像我的 UI5 原始碼分析系列文章那麼深入，但力求淺顯易懂，便於 SAP UI5 初學者理解。

本教程每一個步驟的原始碼，都存放在我的 Github 上，分別用資料夾 01，02，03 等等來標識，例如步驟 1 的原始碼在這裡。

每一個步驟均是前一步驟的基礎上，新增了若干新特性。建議零基礎或者對 SAP UI5 知之甚少的初學者，按照順序從第一個步驟開始循序漸進地學習，把這些程式碼下載到本地，配合教程的文字講解，自己動手，以加深理解。

大家如果對教程的每個步驟有任何疑問，歡迎在教程對應的步驟文章裡給我評論，進行留言。

之前 Jerry 收到不少朋友的私信，詢問 SAP UI5 表格控制元件(Table Control)，如何實現分頁顯示效果。本教程就來介紹這個很多朋友都問過的常見需求。

SAP UI5 表格控制元件並不支援開銷即用的分頁顯示效果。如果 SAP UI5 列表控制元件基於 OData 這種伺服器端模型來實現，列表預設顯示 20 條資料。更多的資料，通過點選列表底部的 More 按鈕動態載入，這就是所謂的 Growing 即動態增長特性。

每次點選 More 按鈕，SAP UI5 列表控制元件都會向 OData 伺服器發起新的資料請求，前提是伺服器端的 OData 服務，實現了分頁功能(Pagination)，即通過 OData 協議的引數 $skip 和 $top, 來返回客戶端(即 SAP UI5 列表控制元件)請求的某一頁內容。

假設每頁顯示 10 條資料，則 SAP UI5 列表控制元件通過下列的 OData 請求，分別讀取每一頁的資料：

  • $skip=0&$top=10: 請求第一頁的資料，即伺服器上第 1 條到第 10 條資料
  • $skip=10&$top=20: 請求第二頁的資料，即伺服器上第 11 條到第 20 條資料
  • 依次類推

本教程後續會介紹使用 OData 伺服器端模型的 SAP UI5 列表分頁顯示的步驟。

如果使用 JSONModel 這種客戶端模型，即列表待顯示的資料，全部位於本地(比如某個 JSON 檔案中)，則分頁顯示又該如何實現呢？

具體步驟如下。

相關文章