richtige Verwendung von Filtern bei den Einzelteilen über XMLView

Bindung

Mit sap.m.Select, ich habe einen ähnlichen Code wie dies unten:richtige Verwendung von Filtern bei den Einzelteilen über XMLView

<m:Select 
    selectedKey='{state}' 
    items="{ 
     path: 'states>/content', 
     sorter: { 
      path: 'name' 
     } 
    }"> 
    <core:Item key="{states>id}" text="{states>name}" /> 
</m:Select>

Wie wollen Staaten in die Lage sein nach Land zu filtern, wenn es in einem anderen Eingang ausgewählt wird, so ich versuche filters verwenden, die in der Dokumentation in definiert:

Das Problem ist, dass ich nirgends (docs, google, SO, Quellcode, Beispiele, Tests) finden konnte, um zu zeigen, wie man es richtig benutzt. Ich habe versucht, diese zwei Möglichkeiten, ohne Erfolg:

<m:Select 
    selectedKey='{state}' 
    items="{ 
     path: 'states>/content', 
     sorter: { 
      path: 'name' 
     }, 
     filters: [{ 
      path: 'countryId', 
      operator: 'EQ', 
      value1: '10' // just example 
     ]} 
    }"> 
    <core:Item key="{states>id}" text="{states>name}" /> 
</m:Select>

und

# View 
<m:Select 
    selectedKey='{state}' 
    items="{ 
     path: 'states>/content', 
     sorter: { 
      path: 'name' 
     }, 
     filters: ['.filterByCountry'} 
    }"> 
    <core:Item key="{states>id}" text="{states>name}" /> 
</m:Select> 

# Controller 
... 
filterByCountry: new sap.ui.model.Filter({ 
    path: 'countryId', 
    operator: 'EQ', 
    value1: '10' 
}), 
...

Jeder weiß der richtige Weg, es zu benutzen?

Quelle

2016-04-22 Marinho Brandão

Hier ist, wie Filter in XML-Ansichten funktionieren - siehe die folgenden 2 Beispiele, die ich für Sie codiert habe (verwenden Sie die jsbin-Links, wenn sie hier nicht auf Stackoverflow laufen). Beide verwenden den OData-Service von Northwind. Wie Sie es ist so ziemlich geradeaus sehen:

<Select 
    items="{ 
     path : '/Orders', 
     sorter: { 
      path: 'OrderDate', 
      descending: true 
     }, 
     filters : [ 
      { path : 'ShipCountry', operator : 'EQ', value1 : 'Brazil'} 
     ] 
    }">

Natürlich können Sie auch mehrere Filter hinzufügen (das zweite Beispiel siehe unten).

Beachten Sie jedoch, dass die Filter in der XMLView deklariert sind. Unglücklicherweise ist UI5 derzeit nicht so dynamisch, um solche in einer XML-Ansicht definierten Filter dynamisch zu ändern, indem nur die Bindesyntax in der XML-Ansicht verwendet wird. Stattdessen würden Sie ein Stück JavaScript-Code benötigen. In Ihrem Fall könnten Sie auf das Änderungsereignis des anderen Feldes warten. In der Ereignisbehandlungsroutine würden Sie dann einfach einen neuen Filter anlegen und anwenden:

var oSelect, oBinding, aFilters, sShipCountry; 

sFilterValue = ...; // I assume you can get the filter value from somewhere... 
oSelect = this.getView().byId(...); //get the reference to your Select control 
oBinding = oSelect.getBinding("items"); 
aFilters = []; 

if (sFilterValue){ 
    aFilters.push(new Filter("ShipCountry", FilterOperator.Contains, sFilterValue)); 
} 
oBinding.filter(aFilters, FilterType.Application); //apply the filter

Das sollte alles sein, was Sie tun müssen. Die folgenden Beispiele verwenden keinen JavaScript-Code für den Filter, aber ich denke, Sie haben die Idee.

1. Beispiel - Wählen Sie Feld:

Führen Sie den Code: https://jsbin.com/wamugexeda/edit?html,output

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <title>SAPUI5 single file template | nabisoft</title> 
 
     <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" 
 
      id="sap-ui-bootstrap" 
 
      data-sap-ui-theme="sap_bluecrystal" 
 
      data-sap-ui-libs="sap.m" 
 
      data-sap-ui-bindingSyntax="complex" 
 
      data-sap-ui-compatVersion="edge" 
 
      data-sap-ui-preload="async"></script> 
 
      <!-- use "sync" or change the code below if you have issues --> 
 
    
 
     <!-- XMLView --> 
 
     <script id="myXmlView" type="ui5/xmlview"> 
 
      <mvc:View 
 
       controllerName="MyController" 
 
       xmlns="sap.m" 
 
       xmlns:core="sap.ui.core" 
 
       xmlns:mvc="sap.ui.core.mvc"> 
 
    
 
       <Select 
 
        items="{ 
 
         path : '/Orders', 
 
         sorter: { 
 
          path: 'OrderDate', 
 
          descending: true 
 
         }, 
 
         filters : [ 
 
          { path : 'ShipCountry', operator : 'EQ', value1 : 'Brazil'} 
 
         ] \t \t \t \t \t 
 
        }"> 
 
        <core:Item key="{OrderID}" text="{OrderID} - {ShipName}" /> 
 
       </Select> 
 
    
 
      </mvc:View> 
 
     </script> 
 
    
 
     <script> 
 
      sap.ui.getCore().attachInit(function() { 
 
       "use strict"; 
 
    
 
       //### Controller ### 
 
       sap.ui.define([ 
 
        "sap/ui/core/mvc/Controller", 
 
        "sap/ui/model/odata/v2/ODataModel" 
 
       ], function (Controller, ODataModel) { 
 
        "use strict"; 
 
    
 
        return Controller.extend("MyController", { 
 
         onInit : function() { 
 
          this.getView().setModel(
 
           new ODataModel("https://cors-anywhere.herokuapp.com/services.odata.org/V2/Northwind/Northwind.svc/", { 
 
            json : true, 
 
            useBatch : false 
 
           }) 
 
          ); 
 
         } 
 
        }); 
 
       }); 
 
    
 
       //### THE APP: place the XMLView somewhere into DOM ### 
 
       sap.ui.xmlview({ 
 
        viewContent : jQuery("#myXmlView").html() 
 
       }).placeAt("content"); 
 
    
 
      }); 
 
     </script> 
 
    
 
    </head> 
 
    
 
    <body class="sapUiBody"> 
 
     <div id="content"></div> 
 
    </body> 
 
</html>

2. Beispiel - Tabelle:

Führen Sie den Code : https://jsbin.com/yugefovuyi/edit?html,output

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <title>SAPUI5 single file template | nabisoft</title> 
 
     <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" 
 
      id="sap-ui-bootstrap" 
 
      data-sap-ui-theme="sap_bluecrystal" 
 
      data-sap-ui-libs="sap.m" 
 
      data-sap-ui-bindingSyntax="complex" 
 
      data-sap-ui-compatVersion="edge" 
 
      data-sap-ui-preload="async"></script> 
 
      <!-- use "sync" or change the code below if you have issues --> 
 
    
 
     <!-- XMLView --> 
 
     <script id="myXmlView" type="ui5/xmlview"> 
 
      <mvc:View 
 
       controllerName="MyController" 
 
       xmlns="sap.m" 
 
       xmlns:core="sap.ui.core" 
 
       xmlns:mvc="sap.ui.core.mvc"> 
 
    
 
       <Table 
 
        id="myTable" 
 
        growing="true" 
 
        growingThreshold="10" 
 
        growingScrollToLoad="true" 
 
        busyIndicatorDelay="0" 
 
        items="{ 
 
         path : '/Orders', 
 
         sorter: { 
 
          path: 'OrderDate', 
 
          descending: true 
 
         }, 
 
         filters : [ 
 
          { path : 'ShipCity', operator : 'Contains', value1 : 'rio'}, 
 
          { path : 'ShipName', operator : 'EQ', value1 : 'Hanari Carnes'} 
 
         ] \t \t \t \t \t 
 
        }"> 
 
        <headerToolbar> 
 
         <Toolbar> 
 
          <Title text="Orders of ALFKI"/> 
 
          <ToolbarSpacer/> 
 
         </Toolbar> 
 
        </headerToolbar> 
 
        <columns> 
 
         <Column> 
 
          <Text text="OrderID"/> 
 
         </Column> 
 
         <Column> 
 
          <Text text="Order Date"/> 
 
         </Column> 
 
         <Column> 
 
          <Text text="To Name"/> 
 
         </Column> 
 
         <Column> 
 
          <Text text="Ship City"/> 
 
         </Column> 
 
        </columns> 
 
        <items> 
 
         <ColumnListItem type="Active"> 
 
          <cells> 
 
           <ObjectIdentifier title="{OrderID}"/> 
 

 
           <Text 
 
            text="{ 
 
             path:'OrderDate', 
 
             type:'sap.ui.model.type.Date', 
 
             formatOptions: { style: 'medium', strictParsing: true} 
 
            }"/> 
 

 
           <Text text="{ShipName}"/> 
 

 
           <Text text="{ShipCity}"/> 
 

 
          </cells> 
 
         </ColumnListItem> 
 
        </items> 
 
       </Table> 
 
    
 
      </mvc:View> 
 
     </script> 
 
    
 
     <script> 
 
      sap.ui.getCore().attachInit(function() { 
 
       "use strict"; 
 
    
 
       //### Controller ### 
 
       sap.ui.define([ 
 
        "sap/ui/core/mvc/Controller", 
 
        "sap/ui/model/odata/v2/ODataModel" 
 
       ], function (Controller, ODataModel) { 
 
        "use strict"; 
 
    
 
        return Controller.extend("MyController", { 
 
         onInit : function() { 
 
          this.getView().setModel(
 
           new ODataModel("https://cors-anywhere.herokuapp.com/services.odata.org/V2/Northwind/Northwind.svc/", { 
 
            json : true, 
 
            useBatch : false 
 
           }) 
 
          ); 
 
         } 
 
        }); 
 
       }); 
 
    
 
       //### THE APP: place the XMLView somewhere into DOM ### 
 
       sap.ui.xmlview({ 
 
        viewContent : jQuery("#myXmlView").html() 
 
       }).placeAt("content"); 
 
    
 
      }); 
 
     </script> 
 
    
 
    </head> 
 
    
 
    <body class="sapUiBody"> 
 
     <div id="content"></div> 
 
    </body> 
 
</html>

Quelle

2016-04-24 13:36:05 Nabi

richtige Verwendung von Filtern bei den Einzelteilen über XMLView

Antwort

Verwandte Themen