SAPUI5 Walkthrough Step 24: Filtering
作者:互联网
Step 24: Filtering
数据过滤:增加SearchField组件,用来对数据进行过滤
修改 webapp/view/InvoiceList.view.xml 文件, 增加SearchField组件
<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" controllerName="sap.ui.demo.walkthrough.controller.InvoiceList"> <List id="invoiceList" 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> ...... </items> </List> </mvc:View>
修改webapp/controller/InvoiceList.controller.js 文件,增加onFilterInvoices的处理逻辑
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) { 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); } }); });
执行。 输入值后回车,数据被过滤
标签:24,formatter,SAPUI5,aFilter,Step,ui,var,model,sap 来源: https://www.cnblogs.com/keyuming/p/15100229.html