这节课我们将针对list增加一个筛选功能。
1.首先改造下InvoiceList.view.xml,加入id方便找到它以及标签
<mvc:ViewcontrollerName="ui5.walkthrough.controller.InvoiceList"xmlns="sap.m"xmlns:core="sap.ui.core"xmlns:mvc="sap.ui.core.mvc"><Listid="invoiceList"class="sapUiResponsiveMargin"width="auto"items="{invoice>/Invoices}" ><headerToolbar><Toolbar><Title text="{i18n>invoiceListTitle}"/><ToolbarSpacer/><SearchField width="50%" search=".onFilterInvoices"/></Toolbar></headerToolbar>...
</mvc:View>
2.修改InvoiceList.controller.js
sap.ui.define(["sap/ui/core/mvc/Controller","sap/ui/model/json/JSONModel","sap/ui/model/Filter","sap/ui/model/FilterOperator"
], (Controller, JSONModel, Filter, FilterOperator) => {"use strict";return Controller.extend("ui5.walkthrough.controller.InvoiceList", { onInit() {const oViewModel = new JSONModel({currency: "EUR"});this.getView().setModel(oViewModel, "view");},onFilterInvoices(oEvent) {// build filter arrayconst aFilter = [];const sQuery = oEvent.getParameter("query");if (sQuery) {aFilter.push(new Filter("ProductName", FilterOperator.Contains, sQuery));}// filter bindingconst oList = this.byId("invoiceList");const oBinding = oList.getBinding("items");oBinding.filter(aFilter);}});
});
我们看下这个方法onFilterInvoices:
var aFilter = []; 定义一个空数组,用来存放需要筛选的字段
var sQuery = oEvent.getParameter(“query”); 获取用户输入,oEvent代表的就是当前控件的输入
if (sQuery) {
aFilter.push(new Filter(“ProductName”, FilterOperator.Contains, sQuery));
} 如果输入了字符,就将按照输入的字符去匹配ProductName进行筛选,FilterOperator.Contains这个使筛选的规则,Contains是包含,不区分大小写;同样的类型还有EQ,BT,GT,GE等
Filter 这个类的构造方法:有四个参数[字段,表达式,值1,值2]
var oList = this.byId(“invoiceList”);这个是通过id获取list
var oBinding = oList.getBinding(“items”); 获取list绑定的内容
oBinding.filter(aFilter);调用筛选