第24步:过滤

最新推荐文章于 2022-08-20 23:49:02 发布

真的是我太天真

最新推荐文章于 2022-08-20 23:49:02 发布

阅读量138

点赞数

分类专栏： SAPUI5

原文链接：https://sapui5.hana.ondemand.com/#/topic/5295470d7eee46c1898ee46c1b9ad763

版权

SAPUI5 专栏收录该内容

40 篇文章 5 订阅

订阅专栏

说明

在这一步中，我们为产品列表添加一个搜索字段，并定义一个表示搜索词的过滤器。在搜索时，列表会自动更新，只显示与搜索词匹配的项。

预览

在这里插入图片描述

在列表上方显示一个搜索字段

代码

你可以在演练-第24步查看和下载所有文件。

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>

该视图通过一个搜索控件进行扩展，我们将其添加到发票列表中。我们还需要为列表控件指定一个ID invoiceList ，以便能够从添加到搜索字段的事件处理程序函数onFilterInvoices 中识别列表。此外，搜索字段是列表头的一部分，因此，列表绑定上的每个更改都将触发整个列表(包括搜索字段)的重新呈现。

headerToolbar聚合替换了我们之前在列表头中使用的简单标题属性。工具栏控件更加灵活，可以根据您的喜好进行调整。我们现在在左侧显示标题，并在右侧显示sap.m.Title控件、间隔符和sap.m.SearchField。

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);
		}
	});
});

我们为过滤加载了两个新的依赖项。filter对象将保存筛选操作的配置，而FilterOperator是指定筛选器所需的辅助类型。

在onFilterInvoices 函数中，我们根据用户在搜索字段中输入的搜索字符串构造了一个筛选器对象。事件处理程序总是接收一个事件参数，该参数可用于访问事件提供的参数。在我们的例子中，搜索字段定义了一个参数查询，我们通过在oEvent参数上调用getParameter(" query ")来访问它。

如果查询不为空，则向仍然为空的筛选器数组添加一个新的筛选器对象。但是，如果查询为空，则使用空数组过滤绑定。这确保我们再次看到所有列表元素。如果要搜索多个数据字段，还可以向数组添加更多过滤器。在我们的示例中，我们只在ProductName路径中进行搜索，并指定一个将提供给查询字符串的筛选操作符。

列表是通过我们在视图中指定的ID访问的，因为控件会自动加上视图ID前缀，所以我们需要通过辅助函数 byId 向视图请求控件。在列表控件上，我们访问聚合items的绑定，以使用新构造的筛选器对象对其进行筛选。这将根据搜索字符串自动筛选列表，以便在触发搜索时只显示匹配项。过滤操作符 FilterOperator.Contains 不区分大小写。

章节