本文将描述如何基于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. 不出意外的话，列表分页的小功能算是实现了。：）

后记

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