基于JSONModel数据模型的SAP UI5列表分页的实现


前言

本文将描述如何基于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按钮的事件监听

 代码实践

  1. 新建一个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 ); } }); }
    );
  2. 在Object Page对应的controller.js文件中
    1. 引入GrowingJSONModel,并替换为自己项目中GrowingJSONModel的路径。
      sap.ui.define( ['sap/ui/core/mvc/Controller', 'archiving-variants/javascript/GrowingJSONModel' ],function(Controller,GrowingJSONModel){ return ...})​
    2. 初始化模型,并绑定在view上。
      // set growing JSONModel
      this._tableModel = new GrowingJSONModel([]);
      this.getView().setModel(this._tableModel, 'table');​
    3. 向后端请求数据,触发“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;
      }
    4. 接下来就是愉快地操作“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 ]);
      },​
    5. 不出意外的话,列表分页的小功能算是实现了。:)

后记

本文简单描述了如何在前端进行分页操作,后续还可以进一步按需渲染列表项组件来提升列表滑动时的流畅度。如果您对本博客感兴趣,欢迎在下方留言讨论!更多资讯欢迎关注我的主页https://people.sap.com/hoganrrr#about!更多UI5技术博客欢迎访问UI5博客汇总