SAP UI5应用里搜索功能的实现是怎样的,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。在一个包含了list的XML视图里,使用SearchField标签页定义一个搜索按钮
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>
```
在视图的控制器里实现这个搜索函数:
```javascript
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 pressedhandleListItemPress: function (oEvent) {var oRouter = sap.ui.core.UIComponent.getRouterFor(this);var selectedProductId = oEvent.getSource().getBindinGContext().getProperty("ProductID");oRouter.navTo("Detail", {productId: selectedProductId});}});});
```
测试:
搜索能够按照期望的工作:
关于SAP UI5应用里搜索功能的实现是怎样的问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注编程网精选频道了解更多相关知识。
--结束END--
本文标题: SAP UI5应用里搜索功能的实现是怎样的
本文链接: https://www.lsjlt.com/news/236178.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0