前言
本文将描述如何基于JSONModel数据模型，在前端对数以十万计的列表数据进行分页操作，给使用者营造出流畅的UI交互体验。
背景介绍
前端子项目基于SAP UI5框架进行开发，作为一个微服务部署在SAP Business Technology Platform。通用设计为List Page采用OData数据传输协议，Object Page采用RESTful API进行数据交互。在Object Page中，有一张列表包含着数以几十万计的Transmissions。为了防止页面崩溃，需要在前后端对列表数据进行分页操作。
需求分析
JSONModel作为一种客户端数据模型，将后端传来的所有数据绑定在页面View上，通过设置growing属性，点击load more表下按钮即可实现前端数据的懒加载。本功能需求是后端也要进行分页读取操作，并不能一次性将所有数据返回到前端，因此无法触发load more按钮的事件监听。解决思路是后台返回所有数据的总条数，来改写JSONModel的totalCount参数，从而触发load more按钮的事件监听
。
代码实践
- 新建一个GrowingJSONModel类
sap.ui.define(['sap/ui/model/json/JSONListBinding'], function (JSONListBinding) {
'use strict';
/**
* PagingJSONListBinding
* @class
* @extends sap.ui.model.json.JSONListBinding
*/
return JSONListBinding.extend('archiving-variants.javascript.GrowingJSONListBinding', {
getLength: function () {
return this.getModel()._totalCount;
}
});
});
sap.ui.define(
['archiving-variants/javascript/GrowingJSONListBinding', 'sap/ui/model/json/JSONModel'],
function (GrowingListBinding, JSONModel) {
'use strict';
/**
* PagingJSONModel
* @class
* @extends sap.ui.model.json.JSONModel
*/
return JSONModel.extend('archiving-variants.javascript.GrowingJSONModel', {
bindList: function (sPath, oContext, aSorters, aFilters, mParameters) {
return new GrowingListBinding(
this,
sPath,
oContext,
aSorters,
aFilters,
mParameters
);
}
});
}
);
- 在Object Page对应的controller.js文件中
- 引入GrowingJSONModel，并替换为自己项目中GrowingJSONModel的路径。
sap.ui.define(
['sap/ui/core/mvc/Controller',
'archiving-variants/javascript/GrowingJSONModel'
],function(Controller,GrowingJSONModel){
return ...})
- 初始化模型，并绑定在view上。
// set growing JSONModel
this._tableModel = new GrowingJSONModel([]);
this.getView().setModel(this._tableModel, 'table');
- 向后端请求数据，触发“load more”按钮的事件监听。
async getTableDataFun() {
this._tableModel.setData([]);
...
const Url = `path?currentPage=${currentPage}`;
const { data:tableData } = await axios.get(Url);
this._tableModel.setData([
...this._tableModel.getData(),
...tableData
]);
...
this._tableModel._totalCount = tableData.count;
}
- 接下来就是愉快地操作“load more”事件监听函数了。
onTableUpdateStarted(oEvent) {
if (oEvent.getParameter('reason') === 'Growing') {
this._loadGrowingData(oEvent.getParameter('actual') / 50);
}
},
async _loadGrowingData(itemIndex) {
this.currentPage = itemIndex;
const { data } = await axios.get(URL);
this._tableModel.setData([
...this._tableModel.getData(),
...data
]);
},
- 不出意外的话，列表分页的小功能算是实现了。：）
后记
本文简单描述了如何在前端进行分页操作，后续还可以进一步按需渲染列表项组件来提升列表滑动时的流畅度。如果您对本博客感兴趣，欢迎在下方留言讨论！更多资讯欢迎关注我的主页
hoganrrr#about！更多UI5技术博客欢迎访问
UI5博客汇总
