UI5_Walkthrough_Step 23: Filtering 过滤器

一、基本概念

二、练习

新建文件夹23，复制练习ui5_Walkthrough_Step 22: Custom Formatters 自定义格式 文件夹下的内容

2.1 webapp/view/InvoiceList.view.xml

InvoiceList视图xml文件中List控件新增headerToolbar控件，目的是在发票列表的的工具栏加一个搜索框，SearchField 属性绑定搜索处理函数onFilterInvoices，在2.2视图绑定控制器中定义

<mvc:View
   controllerName="sap.ui5.walkthrough.controller.InvoiceList"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <List
      headerText="{i18n>invoiceListTitle}"
      class="sapUiResponsiveMargin"
      width="auto"
      items="{invoice>/Invoices}" >
       <headerToolbar>
         <Toolbar>
            <Title text="{i18n>invoiceListTitle}"/>    <!-- 左侧标题 -->
            <ToolbarSpacer/>  <!-- 弹性间距，将后面的控件推到右侧 -->
            <SearchField 
               width="50%" 
               search=".onFilterInvoices"/>  <!-- 搜索事件处理函数 -->
         </Toolbar>
      </headerToolbar>
      <items>
         <ObjectListItem
           title="{invoice>Quantity} x {invoice>ProductName}"
           number="{
                    parts: ['invoice>ExtendedPrice','view>/currency'],
                    type: 'Currency',
                    formatOptions: { showMeasure: false }
                }"
            numberUnit="{view>/currency}"
            numberState="{= ${invoice>ExtendedPrice} > 50 ? 'Error' : 'Success' }" >
            <firstStatus>
                  <ObjectStatus 
                  text="{ path: 'invoice>Status',formatter: '.formatter.statusText'}"
                  state="{ path: 'invoice>Status',formatter: '.formatter.statusState'}"
                  icon="{ path: 'invoice>Status',formatter: '.formatter.statusIcon'}"
                  />
            </firstStatus>
               </ObjectListItem>
            
      </items>
   </List>
</mvc:View>

2.2 webapp/controller/InvoiceList.controller.js

与Step_22相比

• 新增依赖"sap/ui/model/Filter", "sap/ui/model/FilterOperator"
• 新增函数onFilterInvoices实现搜索功能

query 存储ui界面搜索框输入值

ProductName 为过滤字段名称

FilterOperator.Contains为过滤类型，即ProductName 包含了输入框的值，发票数据就不会被过滤

oList = this.byId("invoiceList");中的id要和xml中列表List控件件的id一致

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("sap.ui5.walkthrough.controller.InvoiceList", {
      formatter: formatter,
      //初始化
      onInit: function () {
        var oViewModel = new JSONModel({
          currency: "EUR",
        });
        this.getView().setModel(oViewModel, "view");
      },
      //发票列表搜索
      onFilterInvoices(oEvent) {
        // build filter array
        const aFilter = [];
        const sQuery = oEvent.getParameter("query");
        if (sQuery) {
          aFilter.push(
            new Filter("ProductName", FilterOperator.Contains, sQuery)
          );
        }

        // filter binding
        const oList = this.byId("invoiceList");
        const oBinding = oList.getBinding("items");
        oBinding.filter(aFilter);
      },
    });
  }
);

2.3 运行结果