Question

此处提供在页面上添加过滤器和搜索栏功能的功能

我无法理解给定的onFilterInvoices，用于过滤在屏幕上显示的列表的功能。

#InvoiceList.controller.js
sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel",
    "../model/formatter",
    "sap/ui/model/Filter",
    "sap/ui/model/FilterOperator"
], function (Controller, JSONModel, formatter , Filter, FilterOperator) {
    "use strict";
    return Controller.extend("Workspace.controller.InvoiceList", {
        formatter: formatter,
        onInit : function () {
            var oViewModel = new JSONModel({
                currency: "EUR"
            });
            this.getView().setModel(oViewModel, "view");
        },
        onFilterInvoices : function (oEvent) {

            var aFilter = [];
            var sQuery = oEvent.getParameter("query");
            if (sQuery) {
                aFilter.push(new Filter("ProductName", FilterOperator.Contains, sQuery));
            }           
            var oList = this.byId("invoiceList");
            var oBinding = oList.getBinding("items");
            oBinding.filter(aFilter);
        }
    });
});

您可以参考Filtering代码

Answer 1

让我尝试解释一下。首先，请阅读：sap.ui.model.Filter

让我们看看：

new Filter("ProductName", FilterOperator.Contains, sQuery)

过滤器需要三件事：

何处寻找数据。
如何寻找到的数据。
什么寻找到的数据。

让我们应用这个：

因此，我们创建过滤器，

将在绑定到我们列表的模型中寻找属性ProductName（存储产品名称）。
现在，它需要知道外观。基本上就是操作。这些操作可以是contains，equals，greater than，less than等，所以我们说，

if ( ProductName.indexOf() > -1 ) { return ProductName; }
要在数据中查找的内容（用户在搜索输入框中输入的内容）。您可以在上面的代码中，indexOf需要一个参数。 sQuery是该参数。所以，让我们完成我们的代码：

if ( ProductName.indexOf(sQuery) > -1 ) { return ProductName; }

上面的语句对模型中的所有元素执行一次（更多内容在下文中），因此，只要满足以上条件，返回的元素和元素便会绑定到列表。

这里有两点要考虑：

“我的列表”绑定到特定路径。是否真的需要遍历模型中的所有数据？否。它需要模型中绑定列表的路径。因此，我们需要在列表绑定，这将告诉路径。试试这个，看看它存储了多少有关绑定的信息：

console.log(oList.getBinding("items"));

如果我的模型绑定到多个列表，那么在1个列表中进行过滤是否会影响其他地方？没有，只有在我搜索。因此，我们不需要在模型上应用过滤器，而在特定于列表的列表绑定上应用过滤器。只要更新这我想过滤列表。因此，我们使用以下方法获取列表的绑定：

oList.getBinding('items')。

现在，将码：oBinding.filter(aFilter);。

它调用了UI5 API：嗨，我想将过滤器应用于此特定列表绑定（仅显示匹配项）。这是filter（array）作为参数。 UI5然后执行过滤器，更新UI。

希望这会有所帮助。

了解过滤器功能时遇到问题

1 个答案: