Step 24: Filtering

Step 24: Filtering

https://ui5.sap.com/#/topic/5295470d7eee46c1898ee46c1b9ad763

List控件的过滤器功能

webapp/view/InvoiceList.view.xml

<mvc:View
   controllerName="sap.ui.demo.walkthrough.controller.InvoiceList"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <List
      id="invoiceList"
      class="sapUiResponsiveMargin"
      width="auto"
      items="{invoice>/Invoices}" >
      <headerToolbar>
         <Toolbar>
            <Title text="{i18n>invoiceListTitle}"/>
            <ToolbarSpacer/>
            <SearchField width="50%" search=".onFilterInvoices"/>
         </Toolbar>
      </headerToolbar>
      <items>
         <ObjectListItem>
		…
         </ObjectListItem/>
      </items>
   </List>
</mvc:View>

1，新加了id属性，为了在event handler代码里找到List控件。
2，headerToolbar，list控件的头部表示
3，Title 在list控件的头部的左侧
4，加个间距
5，，输入框，触发的事件的代码在本view的controller里，函数名字是onFilterInvoices

webapp/controller/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("sap.ui.demo.walkthrough.controller.InvoiceList", {
		formatter: formatter, 
		onInit : function () {
			var oViewModel = new JSONModel({
				currency: "EUR"
			});
			this.getView().setModel(oViewModel, "view");
		},
		onFilterInvoices : function (oEvent) {

			// build filter array
			var aFilter = [];
			var sQuery = oEvent.getParameter("query");
			if (sQuery) {
				aFilter.push(new Filter("ProductName", FilterOperator.Contains, sQuery));
			}

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

1，先创建filter array。aFilter是空数组，oEvent.getParameter("query")是得到用户的输入，如果输入不是空，new Filter，使用ProductName字段最为过滤字段，FilterOperator.Contains指定是包含关系(不区分大小写)
2，filter创建好后，使用byId方法找到view里的list控件，getBinding是得到list控件当前的绑定，用创建好的filter修改当前的绑定（oBinding.filter）

vx:xiaoshitou5854