说明
在这一步中,我们为产品列表添加一个搜索字段,并定义一个表示搜索词的过滤器。在搜索时,列表会自动更新,只显示与搜索词匹配的项。
预览
在列表上方显示一个搜索字段
代码
你可以在演练-第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 不区分大小写。
章节
- 第1步:你好世界
- 第2步:引导
- 第3步:控件
- 第4步:XML视图
- 第5步:控制器
- 第6步:模块
- 第7步:JSON模型
- 第8步:可翻译的文本
- 第9步:组件配置
- 第10步:应用程序描述符
- 第11步:页面和面板
- 第12步:Shell控件作为容器
- 第13步:外边距和内边距
- 第14步:自定义CSS和主题颜色
- 第15步:嵌套视图
- 第16步:对话框和片段
- 第17步:片段回调
- 第18步:图标
- 第19步:重用对话框
- 第20步:聚合绑定
- 第21步:数据类型
- 第22步:表达式绑定
- 第23步:自定义格式器
- 第24步:过滤
- 第25步:排序和分组
- 第26步:远程OData服务
- 第27步:模拟服务器配置
- 第28步:使用QUnit进行单元测试
- 第29步:与OPA的集成测试
- 第30步:调试工具
- 第31步:路由和导航
- 第32步:路由与参数
- 第33步:路由回溯和历史
- 第34步:自定义控件
- 第35步:响应性
- 第36步:设备适应
- 第37步:内容密度
- 第38步:可访问性