SAPUI5 - 在具有列列表项的表上搜索字段

时间:2017-06-05 11:22:35

标签: search data-binding sapui5

编辑:傻我,指着错误的财产。应该指向 ArticleDescription 而不是

我需要在包含自定义列表项的表上使用搜索字段。该表很好地提供了数据,但现在要求添加一个搜索字段以便于搜索,因为有时候表会变大。

在SAPUI5探索页面之后,我似乎无法使其发挥作用。

理想情况下,我希望它使用liveChange属性,因此这是动态完成的。我已经达到了这样做的目的,但我没有回复搜索数据。

任何帮助都将不胜感激。

Table image

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

1 个答案:

答案 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);