SAP UI5应用里搜索功能的实现

简介:

在一个包含了list的XML视图里,使用SearchField标签页定义一个搜索按钮。点击之后,执行的事件处理函数为handleSearch:

<mvc:View controllerName="sapcp.cf.tutorial.app.controller.View1" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
    <Shell id="shell">
        <App id="app">
            <pages>
                <Page id="page" title="{i18n>title}">
                    <subHeader>
                        <Bar>
                            <contentLeft>
                                <SearchField search="handleSearch"/>
                            </contentLeft>
                        </Bar>
                    </subHeader>
                    <content>
                        <List id="List" items="{/Products}">
                            <ObjectListItem type="Navigation" press="handleListItemPress" title="{ProductName}" number="{= ((${UnitPrice} * 100) / 100).toFixed(2) }"
                                numberUnit="{i18n>currency}">
                                <attributes>
                                    <ObjectAttribute text="{QuantityPerUnit}"/>
                                </attributes>
                                <firstStatus>
                                    <ObjectStatus text="{= ${Discontinued}? 'Discontinued' : 'Available' }" state="{= ${Discontinued}? 'Error' : 'Success' }"/>
                                </firstStatus>
                            </ObjectListItem>
                        </List>
                    </content>
                </Page>
            </pages>
        </App>
    </Shell>
</mvc:View>

在视图的控制器里实现这个搜索函数:


sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/m/MessageBox"
], function (Controller, MessageBox) {
    "use strict";

    return Controller.extend("sapcp.cf.tutorial.app.controller.View1", {
        onInit: function () {

        },

        // show in a pop-up which list element was pressed
        handleListItemPress: function (oEvent) {
            var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
            var selectedProductId = oEvent.getSource().getBindingContext().getProperty("ProductID");
            oRouter.navTo("Detail", {
                productId: selectedProductId
            });
        }
    });
});

测试:

搜索能够按照期望的工作:

本文来自云栖社区合作伙伴“汪子熙”,了解相关信息可以关注微信公众号"汪子熙"。

相关文章
|
28天前
|
Web App开发 前端开发 JavaScript
乱花渐欲迷人眼 - 让 SAP UI5 应用的日志输出不再素面朝天
乱花渐欲迷人眼 - 让 SAP UI5 应用的日志输出不再素面朝天
33 0
|
28天前
|
Web App开发 JSON JavaScript
SAP UI5 应用程序小技巧 - 一键将 JSON 对象导出成本地 json 文件
SAP UI5 应用程序小技巧 - 一键将 JSON 对象导出成本地 json 文件
19 0
|
28天前
|
XML 数据处理 数据格式
什么是 SAP UI5 XML Templating 技术
什么是 SAP UI5 XML Templating 技术
37 0
|
28天前
让 SAP UI5 应用的日志打印变得五彩缤纷试读版
让 SAP UI5 应用的日志打印变得五彩缤纷试读版
68 2
|
28天前
|
XML JavaScript 数据格式
SAP UI5 XML Preprocessor 的工作原理和 instructions 指令详解
SAP UI5 XML Preprocessor 的工作原理和 instructions 指令详解
14 0
|
28天前
|
XML 设计模式 前端开发
什么是 SAP UI5 XML preprocessor
什么是 SAP UI5 XML preprocessor
13 0
|
28天前
|
XML JavaScript 数据格式
SAP UI5 XML Preprocessor 的一个局限性介绍
SAP UI5 XML Preprocessor 的一个局限性介绍
15 0
|
28天前
SAP Fiori Elements 应用里图片字段(Image)的显示原理介绍试读版
SAP Fiori Elements 应用里图片字段(Image)的显示原理介绍试读版
8 0
|
28天前
SAP UI5 应用如何实现类似百度首页一样的访问方式试读版
SAP UI5 应用如何实现类似百度首页一样的访问方式试读版
23 0
|
28天前
|
开发框架 容器
SAP UI5 控件的 aggregation 的概念解析
SAP UI5 控件的 aggregation 的概念解析
28 0