SAP UI5app开发教程第93部分-基于JSONModel数据模型的列表控件显示数据的深入讨论

作者简介

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自主开发的框架，包括SAP UI5。

教程内容

解释

Jerry于2014年加入SAP成都研究院CRM Fiori开发团队后开始接触SAP UI5。他在SAP社区和“王子喜”微信公众号上发表了许多关于SAP UI5工作原理和源代码分析的文章。

正如Jerry的文章中提到的，Jerry也是SAP UI5的新手。他知道，对于只有ABAP开发背景的开发人员来说，转型到SAP UI5开发领域并不容易。因此，我在业余时间为SAP UI5初学者设计了本学习教程，将开发完整的SAP UI5app的过程分为几个步骤，并努力涵盖每个步骤中涉及的所有知识点。这些知识点可能没有我的UI5源代码分析系列那么深入，但对于SAPUI5初学者来说应该很容易理解。

本教程中每个步骤的源代码都存储在my上，并由文件夹01、02、03等标识。例如，步骤1的源代码存储在my。

[图像上载失败…（Image-281cc9-1653790327306）]

每一步都基于前一步，并添加了几个新功能。建议对SAP UI5没有基本知识或了解很少的初学者从第一步开始逐步学习，在本地下载这些代码，并根据教程的内容进行自己的工作，以加深他们的理解。

如果您对教程的每个步骤有任何疑问，请在教程的相应步骤文章中评论并留言。

如本教程前一步所述，本教程将介绍如何实现SAPUI5列表控件的分页显示功能。该功能的实现分为两种情况：客户端模型和服务器模型。

步骤92，我们解释了如何使用JavaScript代码访问SAP UI5app中JSONModel绑定的数据。

一位朋友问，为什么学习第92步后的产品json数据文件中有123条数据，但UI中只能看到100条数据？

这是一个好问题。

首先，介绍了如何快速获取当前列表中的行项目数。当然，我们不会采取肉眼逐行计数的愚蠢方法。

方法1

我们打开Chrome开发工具的控制台面板，输入以下语句：var items=jQuery（“#container fiori2---fcl-biginView--productsTable tblBody>tr”）；

使用jQuery计算ID为容器fiori2--fcl--beginView--productsTable tblBody的元素的名为tr的子元素的数量：

这里，jQuery括号中的语法#表示jQuery id选择器的使用，也就是说，需要在#

此ID可在Chrome开发工具的“元素”选项卡中找到。

#container-fori2---fcl-beginView--productsTable tblBody>>在tr中；符号表示父子关系，因为我们只关心列表控件的tr子元素的数量。这样，我们只能读取列表控件的tr子元素，而忽略列表控件之外其他位置的tr元素。

jQuery查询的结果存储在我们定制的varitems变量中。通过访问其长度属性，我们可以知道行项目的数量是100

方法2

有关详细信息，请参阅此。