SAPUI5新手求助：如何在控制器中过滤Master视图客户列表？

Hey there! Since you're new to SAPUI5, let's break down how to add flexible filtering for any OData property to your customer list step by step. I'll keep this practical and aligned with your existing Master-Detail setup.

Step 1: Add Filter Controls to Your Master View #

First, let's add UI elements so users can specify which property to filter and what value to use. Update your MasterView.xml to include a dropdown for property selection and an input for the filter value:

<!-- Add this above your List control -->
<HBox alignItems="Center" spacing="10" class="sapUiSmallMargin">
    <Select id="propertySelect" width="180px">
        <core:Item key="CustomerID" text="Customer ID" />
        <core:Item key="CompanyName" text="Company Name" />
        <core:Item key="Country" text="Country" />
        <core:Item key="City" text="City" />
        <core:Item key="ContactName" text="Contact Name" />
    </Select>
    <Input 
        id="filterInput" 
        placeholder="Enter filter value..." 
        liveChange=".onFilterCustomers" 
        width="250px"
    />
</HBox>

<!-- Your existing List control -->
<List 
    id="list" 
    items="{ 
        path: '/Customers', 
        sorter: { path: 'CompanyName', descending: false }, 
        groupHeaderFactory: '.createGroupHeader' 
    }" 
    busyIndicatorDelay="{masterView>/delay}"
>
    <!-- Your list items go here -->
</List>

Step 2: Implement Filter Logic in the Master Controller #

Next, update your Master controller to handle the filtering logic. We'll use SAPUI5's Filter and FilterOperator classes to create dynamic filters based on user input:

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/Filter",
    "sap/ui/model/FilterOperator"
], function(Controller, Filter, FilterOperator) {
    "use strict";

    return Controller.extend("your.app.namespace.controller.Master", {
        onFilterCustomers: function(oEvent) {
            // Get user input values
            const sFilterValue = oEvent.getParameter("value").trim();
            const sSelectedProperty = this.getView().byId("propertySelect").getSelectedKey();
            const oList = this.getView().byId("list");
            const oItemsBinding = oList.getBinding("items");

            // Apply or clear filter based on input
            if (sFilterValue && sSelectedProperty) {
                // Create a single filter for the selected property and value
                const oFilter = new Filter({
                    path: sSelectedProperty,
                    operator: FilterOperator.Contains,
                    value1: sFilterValue
                });
                oItemsBinding.filter([oFilter]);
            } else {
                // Clear filter to show all customers
                oItemsBinding.filter([]);
            }
        },

        // Your existing createGroupHeader function remains unchanged
        createGroupHeader: function(oGroup) {
            return new sap.m.GroupHeaderListItem({
                title: oGroup.key,
                upperCase: false
            });
        }
    });
});

Key Notes for Customization #

• Filter Operators: Swap FilterOperator.Contains with other operators like EQ (exact match), StartsWith, or GT (greater than) depending on your needs. Northwind OData supports most standard operators.
• Multi-Property Filtering: If you want to filter across multiple properties at once, create an array of Filter objects and combine them with an AND/OR condition:

  const aFilters = [
      new Filter("CompanyName", FilterOperator.Contains, sFilterValue),
      new Filter("Country", FilterOperator.Contains, sFilterValue)
  ];
  const oCombinedFilter = new Filter({
      filters: aFilters,
      and: false // Use "true" for AND logic, "false" for OR
  });
  oItemsBinding.filter([oCombinedFilter]);
  

• Server-Side vs Client-Side Filtering: By default, SAPUI5 sends filter requests to the OData server (server-side filtering), which is efficient for large datasets. If you need client-side filtering, add parameters: {filter: "client"} to your list's items binding.

Hope this helps you get flexible filtering working smoothly in your app! Let me know if you hit any roadblocks.

内容的提问来源于stack exchange，提问作者Timur