SAP UI5搜索 - 绑定到XML-View

时间:2017-10-10 05:48:09

标签: javascript jquery xml sapui5

我正在尝试构建一个SAPUI5应用程序来显示我公司的当前传输。作为数据源,我们使用了manifest.json中引用的SAP Backend-Service。

我的metadata.xml:

<EntityType Name="Transporteintrag" sap:content-version="1">
   <Key>
       <PropertyRef Name="Id"/>
   </Key>
   <Property Name="Id" Type="Edm.Int32" Nullable="false" sap:label="Zahl" sap:creatable="false" sap:updatable="false"/>
   <Property Name="Land" Type="Edm.String" Nullable="false" MaxLength="3" sap:label="Land" sap:creatable="false" sap:updatable="false"/>
   <Property Name="Kunnr" Type="Edm.String" Nullable="false" MaxLength="10" sap:label="Warenempfänger" sap:creatable="false" sap:updatable="false"/>
   <Property Name="Name1" Type="Edm.String" Nullable="false" MaxLength="30" sap:label="Name 1" sap:creatable="false" sap:updatable="false"/>
   <Property Name="AnzMat" Type="Edm.Int32" Nullable="false" sap:label="Zahl" sap:creatable="false" sap:updatable="false"/>
   <Property Name="Gesber" Type="Edm.String" Nullable="false" MaxLength="10" sap:label="Characterfeld der Länge 10" sap:creatable="false" sap:updatable="false"/>
   <Property Name="Tknum" Type="Edm.String" Nullable="false" MaxLength="10" sap:label="Transportnummer" sap:creatable="false" sap:updatable="false"/>
</EntityType>
<EntityContainer Name="ZVERSAND_SRV_Entities" m:IsDefaultEntityContainer="true" sap:supported-formats="atom json xlsx">
    <EntitySet Name="Transporteintrag_S" EntityType="ZVERSAND_SRV.Transporteintrag" sap:creatable="false" sap:updatable="false" sap:deletable="false" sap:searchable="true" sap:content-version="1"/>
    <EntitySet Name="Transporteintrag_T" EntityType="ZVERSAND_SRV.Transporteintrag" sap:creatable="false" sap:updatable="false" sap:deletable="false" sap:searchable="true" sap:content-version="1"/>
    <EntitySet Name="Transporteintrag_F" EntityType="ZVERSAND_SRV.Transporteintrag" sap:creatable="false" sap:updatable="false" sap:deletable="false" sap:searchable="true" sap:content-version="1"/>
    <EntitySet Name="Transporteintrag_D" EntityType="ZVERSAND_SRV.Transporteintrag" sap:creatable="false" sap:updatable="false" sap:deletable="false" sap:searchable="true" sap:content-version="1"/>
</EntityContainer>

我使用XML和数据绑定来构建视图以连接我的模型。

Page1.view.xml

<SearchField xmlns="sap.m" width="100%" placeholder="Suchen" id="__field0" liveChange="handleLiveSearch"/>

<Table id="Table_0_0" width="100%" noDataText="Das ist jetzt doof ..." mode="None" showSeparators="All" growing="true" growingThreshold="5000" growingScrollToLoad="true" items="{/Transporteintrag_D}">
<columns>
    <Column hAlign="Left" vAlign="Top" minScreenWidth="Phone" demandPopin="true" popinDisplay="Inline" mergeDuplicates="false">
        <header>
            <Text text="WE" width="auto" maxLines="2" wrapping="true" textAlign="Begin" textDirection="Inherit" class="custom_font_table"/>
        </header>
        <footer/>
    </Column>
</columns>
<items>
    <ColumnListItem type="Active">
        <cells>
            <Text text="{= ${Name1}.substr(0,30)}" width="auto" maxLines="1" wrapping="false" textAlign="Begin" textDirection="Inherit" class="custom_font_table row_height"/>
        </cells>
    </ColumnListItem>
</items>
<headerToolbar>
    <core:Fragment xmlns:core="sap.ui.core" fragmentName="Versand_Clean.view.TableHeaderFragment" type="XML" id="__toolbar_X0"/>
</headerToolbar>
</Table>

DataBinding工作正常。但是,在浏览器中打开应用程序时,所有数据都会显示在我的sap.m.table中。

为了给最终用户更多的可用性,我试图实现一个实时搜索字段。

这是我的问题: 我在Page1.controller.js

中构建了liveChange函数
handleLiveSearch: function (oEvent) {
   var searchQuery = oEvent.getSource().getValue();
   var oFilter = [new sap.ui.model.Filter("WE", sap.ui.model.FilterOperator.Contains, searchQuery)];
   var oView = this.getView();
   var oTable = oView.byId("Table_0_0");
   var oBinding = oTable.getBinding("items");
   if(searchQuery === "")
   {
       oBinding.filter( [] );
       oBinding.refresh(true);
   }
   else
   {
       oBinding.filter(oFilter);
       oBinding.refresh(true);
   }
}

输入searchField会出现问题。键入第一个char后,我的表格不会显示任何数据。当我清空搜索字段时,我的数据会再次显示。

我的代码出了什么问题?

修改 要检查过滤器是否应用于表格,我会打开Goog​​le Chrome开发者工具和标记来源。现在我能够看到过滤器应用于表格。但表仍未更新值。 enter image description here

表中目前有3个值。只有一个包含“Delphi”。

3 个答案:

答案 0 :(得分:0)

问题在于过滤器,您尝试的属性不存在于元数据中。

 var oFilter = [new sap.ui.model.Filter("WE", sap.ui.model.FilterOperator.Contains, searchQuery)];

使用 Name1 更改 WE

var oFilter = [new sap.ui.model.Filter("Name1", sap.ui.model.FilterOperator.Contains, searchQuery)];

答案 1 :(得分:0)

除了Saddamhussain的编辑外,还必须是:

{{1}}

答案 2 :(得分:0)

这里的问题是包含运算符。该操作符在SAP的OData实现中无法正常工作。您可以使用一个小技巧并在创建这样的过滤器时应用tolower函数:

var searchQuery = searchQuery.toLowerCase();
// this step is important for the OData query
searchQuery = "'" + searchQuery + "'"; 
var filter = new sap.ui.model.Filter("tolower(Name1)", sap.ui.model.FilterOperator.Contains, searchQuery);
var oFilter = [ filter ];

另一方面,您可以使用其他比较运算符,例如EQ,但您的搜索字符串必须完全匹配:

var oFilter = [new sap.ui.model.Filter("Name1", sap.ui.model.FilterOperator.EQ, searchQuery)];