Skip to Content
Technical Articles
Author's profile photo Hogan He

基于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博客汇总

Assigned Tags

      1 Comment
      You must be Logged on to comment or reply to a post.
      Author's profile photo Sherry Qiao
      Sherry Qiao

      Hi Hogan,

      非常感谢你的分享,it is very useful.

      看起来这个方法只适用于sap.m.Table, 对于sap.ui.table.TreeTable, 有相应

      的分页方法吗?

       

      Regards,

      Sherry