在上一篇博文中，云服务器，怎样做淘客，我们开始设计我们的应用程序，与一些业务伙伴呈现一个表。我们学习了什么是OData协议，如何读取ODataXML清单，如何将数据绑定到表，云从，以及如何根据不同的屏幕分辨率自定义列布局。

通过本系列博客文章的第2部分，我们将学习如何与表和列表中的数据交互。我们将学习如何以智能的方式过滤和排序数据。

创建JSONModel来处理本地数据为JSONModel设置一个默认的sizeLimitFilterBar:UI控件，它以用户友好的方式显示过滤器以填充查询的值使用XML片段创建视图设置对话框来处理排序和分组数据过滤和排序数据在我们的表中添加一个信息工具栏来显示有用的信息

FilterBar

我们要做的第一件事是允许用户过滤表中显示的业务伙伴列表。大多数情况下，我们有一个非常大的数据（我们的业务伙伴集由13880条记录组成）要显示，用户只想根据一些有用的信息过滤所有这些记录。

为此，淘客小程序，您需要在表上方添加一个过滤器栏。此UI控件仅在SAPUI5上可用，在OpenUI5中不可用。

FilterBar允许您按顺序对筛选器进行分组。此UI控件始终与变体管理器一起使用，我这次将不介绍它。

添加四个不同的筛选器：

ID:将筛选BusinessPartnerID属性的输入Name:过滤CompanyName属性的输入街道：输入Country：选择（Country code list JSON）过滤Address/Country属性

在您将这些输入添加到FilterBar之后，您需要做的是绑定到"search"和"clear"事件。第一个将在用户开始搜索时触发，第二个将在您必须清除所有筛选器并开始空白搜索时触发。

筛选器必须彼此独占。如果用户在公司名称中添加了"SAP"，在国家代码中添加了"IT"，那么您的表应该过滤类似于

JSONModel

的查询。我们已经说过，在SAPUI5中，您必须使用不同类型的模型：

ODataModel v2：基于OData协议的模型实现（版本2）。当您需要与OData服务交互时使用它。JSONModel:JSON数据的模型实现。它主要用于处理本地/临时数据

对于我们的练习，我建议您创建一个JSONModel来存储筛选数据，另一个用于存储国家代码。当您在model文件夹中创建了一个本地JSON文件后，就可以从清单.jsonhat当你的应用程序启动时，它会处理所有的逻辑来预加载信息。

过滤器

过滤器是一个强大的工具，它允许您混合使用不同的筛选器来创建复杂的OData查询，然后在后端用SQL进行翻译。

筛选器的第二个构造函数允许您混合筛选器，以便创建AND和OR筛选器组。

创建最终筛选器后，您可以将其应用于表绑定。

排序和分组

用户总是希望根据特定列对记录进行排序/分组，物联网公司，它们的工作方式或多或少类似于筛选器。

vGroup参数很重要，因为它允许您指定一种自定义方式来重新分组项目。您只需要实现一个自定义函数，返回一个JavaScript对象，其中包含一个键和一个文本值。SAPUI5将使用

键来了解记录是否已经包含在具有相同键值的组中SAPUI5使用文本创建显示组名的UI

当您要为日期等特殊值重新组合项目时，此函数尤其重要。每个JavaScript日期都是不同的，因为它处理数据的时间是毫秒。在这种情况下，您可以将日期格式化为只显示年-月-日，并且项目将被正确地分组为该日期。

尝试只为"CreatedAt"属性分组，而不使用自定义函数，看看会发生什么

排序和分组：UI/UX

允许用户对表/列表中的数据进行排序和分组的最佳方法是使用ViewSettings对话框。

这是很容易定义和配置，给你很多的控制。VIEWSETTINGS对话框嵌入在片段中，显示为对话框/弹出窗口

通常，当你想显示这样一个对话框时，你只需要在一个文件中创建你的片段定义（比如ViewSettingDialog.fragment.xml文件)当用户点击桌子上方的按钮时，我们需要注意两件事：

资源的再利用生命周期依赖性

两者都允许您不浪费资源，也不造成内存泄漏（而且您真的不想处理它们！）

所以：

信息工具栏

信息工具栏是一个由ListBase（由表扩展的类）处理的工具栏，通常显示在标题下方（在信息工具栏聚合中）。当你想显示一些需要突出显示的信息时，它非常有用，当用户执行搜索时，我们将显示搜索的最新时间戳以及总共过滤了多少条记录。

如果您想查看最终结果，可以直接转到GitHub项目的step_2分支。