我需要在包含自定义列表项的表上使用搜索字段。该表很好地提供了数据,但现在要求添加一个搜索字段以便于搜索,因为有时候表会变大。
在SAPUI5探索页面之后,我似乎无法使其发挥作用。
理想情况下,我希望它使用liveChange属性,因此这是动态完成的。我已经达到了这样做的目的,但我没有回复搜索数据。
任何帮助都将不胜感激。
main.view.xml
<!-- Search box -->
<SearchField liveChange="onSearch" width="100%" class="sapUiMediumMarginBottom"/>
<!-- Table -->
<Table id="stock_table" itemPress="onOrderClicked" items="{stock>/Items}" keyboardMode="Edit" showFullScreenButton="true">
<infoToolbar>
<Toolbar>
<ToolbarSpacer/>
<Label text="{ path:'stock>/CurrentDate', formatter:'.tableHeader'}"/>
<ToolbarSpacer/>
</Toolbar>
</infoToolbar>
<columns>
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="{i18n>Article}"/>
</Column>
<Column minScreenWidth="Tablet" width="10em" demandPopin="true">
<Text text="{i18n>UnitOfMeasure}"/>
</Column>
<Column minScreenWidth="Tablet" width="8em" demandPopin="true">
<Text text="{i18n>Quantity}"/>
</Column>
</columns>
<items>
<ColumnListItem class="sapUiSizeCompact">
<customData>
<core:CustomData key="mydata" value="{stock>_errorStateClass}"
writeToDom="true"/>
</customData>
<HBox>
<core:Icon src="sap-icon://message-information"
tooltip="{i18n>ArticleNumber}: {stock>ArticleNumber}"
class="sapUiSmallMarginEnd greggslightblue"/>
<Text text="{stock>ArticleDescription}"/>
</HBox>
<Text text="{stock>UnitOfMeasureDescription}"/>
<HBox>
<Input id="quantity_input" valueLiveUpdate="true" value="{stock>_Quantity}"
liveChange="onQuantityAmountChanged"
class="CanHaveInteraction green_enter" width="5rem"/>
<core:Icon src="sap-icon://message-error"
tooltip="{stock>_ErrorMessage}"
class="sapUiSmallMarginEnd greggsred input-warning-icon"
visible="{stock>_ErrorStatus}" press="onErrorIconPressed"/>
<core:Icon src="sap-icon://message-warning"
tooltip="{stock>_ErrorMessage}"
class="sapUiSmallMarginEnd greggsred input-warning-icon"
visible="{stock>_WarningStatus}"/>
</HBox>
</ColumnListItem>
</items>
</Table>
main.controller.js
onSearch : function (oEvt) {
// add filter for search
var aFilters = [];
var sQuery = oEvt.getSource().getValue();
if (sQuery && sQuery.length > 0) {
var filter = new Filter("Name", sap.ui.model.FilterOperator.Contains, sQuery);
aFilters.push(filter);
}
// update list binding
var list = this.getView().byId("stock_table");
var binding = list.getBinding("items");
binding.filter(aFilters, "Application");
}
答案 0 :(得分:0)
您确定以下行包含有效的搜索查询:
var sQuery = oEvt.getSource().getValue();
如API https://openui5.hana.ondemand.com/#docs/api/symbols/sap.m.SearchField.html#event:liveChange中所述,您必须使用事件源参数'newValue':
var sQuery = oEvt.getParameter("newValue");
<强>更新强>
当您尝试过滤“名称”路径时,请显示您的数据结构。但是在表列绑定中,我看不到任何名为“Name”的属性。相反,您可以尝试过滤属性'ArticleDescription':
var filter = new Filter("ArticleDescription", sap.ui.model.FilterOperator.Contains, sQuery);