Question

我有一个包含多个过滤器项的过滤器栏，我需要获取onSearch事件中每个过滤器项的选定/键入的值。我已经尝试过，但无法找出一种方法来获取所有过滤器项目的所有过滤器数据。

<fb:FilterBar reset="onReset"
              search="onSearchFilterbar"
              showRestoreButton="true"
              showClearButton="true"
              filterBarExpanded="false"
            id="userFilterBar">
    <fb:filterItems>
        <fb:FilterItem name="A" label="User">
            <fb:control>
                <Select id="slcUser" forceSelection="false"
                        items="{ path: 'sysusers>/Users' , sorter: { path: 'Name' } }" >
                    <core:Item key="{sysusers>Name}" text="{sysusers>Name}"/>
                </Select>
            </fb:control>
        </fb:FilterItem>
        <fb:FilterItem name="B" label="Location">
            <fb:control>
                <Select id="slcLocation" forceSelection="false"
                        items="{ path: 'location>/Locations' , sorter: { path: 'Name' } }">
                    <core:Item key="{location>Name}" text="{location>Name}"/>
                </Select>
            </fb:control>
        </fb:FilterItem>
    </fb:filterItems>
</fb:FilterBar>  



onsearch:function(oEvent){
    oEvent.getSource().getFilterItems()[0];
    // But cannot find a way to get the selected data
}

Answer 1

项目的值在事件的参数上。

oEvent.getParameter('0').selectionSet

这是一个数组，每个控件都可以使用filterbar：

oEvent.getParameter('0').selectionSet[0].getValue()

Answer 2

有几种方法可以做到这一点。 IMO，最好的方法是使用模型。那就是采用MVC方法。这是一个有效的示例，http://jsbin.com/nudewew/edit?html,output

<!DOCTYPE HTML>
<html>

  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="UTF-8">
    <title>MVC</title>
    <script id="sap-ui-bootstrap" type="text/javascript"
            src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-libs="sap.m,sap.ui.table"
            data-sap-ui-xx-bindingSyntax="complex">
    </script>

    <script id="oView" type="sapui5/xmlview">
    <mvc:View height="100%" controllerName="myView.Template"
      xmlns="sap.m" 
      xmlns:fb="sap.ui.comp.filterbar"
      xmlns:core="sap.ui.core"
      xmlns:mvc="sap.ui.core.mvc">
    <fb:FilterBar reset="onReset"
              search="onSearchFilterbar"
              showRestoreButton="true"
              showClearButton="true"
              filterBarExpanded="false"
            id="userFilterBar">
    <fb:filterItems>
        <fb:FilterItem name="A" label="User">
            <fb:control>
                <Select id="slcUser" forceSelection="false" selectedKey="{selection>/user}"
                        items="{ path: 'sysusers>/Users' , sorter: { path: 'Name' } }" >
                    <core:Item key="{sysusers>Name}" text="{sysusers>Name}"/>
                </Select>
            </fb:control>
        </fb:FilterItem>
        <fb:FilterItem name="B" label="Location">
            <fb:control>
                <Select id="slcLocation" forceSelection="false" selectedKey="{selection>/location}"
                        items="{ path: 'location>/Locations' , sorter: { path: 'Name' } }">
                    <core:Item key="{location>Name}" text="{location>Name}"/>
                </Select>
            </fb:control>
        </fb:FilterItem>
    </fb:filterItems>
</fb:FilterBar>  
  </mvc:View>
    </script>
    <script>
      sap.ui.define([
        'jquery.sap.global',
        'sap/ui/core/mvc/Controller',
        'sap/ui/model/json/JSONModel'
      ], function(jQuery, Controller, JSONModel) {
        "use strict";

        var oController = Controller.extend("myView.Template", {
          onInit: function() {
            var oView = this.getView();

            oView.setModel(new JSONModel({
              user: "",
              location: ""
            }), "selection");
            oView.setModel(new JSONModel({
              Users: [
                {Name: "johnDoe"},
                {Name: "maryAnn"}
              ]          
            }), "sysusers");
            oView.setModel(new JSONModel({
              Locations: [
                {Name: "London"},
                {Name: "Paris"}
              ]          
            }), "location");
          },
          onSearchFilterbar: function(oEvent) {
            console.log(this.getView().getModel("selection").getData());
          }

        });

        return oController;
      });

      var oView = sap.ui.xmlview({
        viewContent: jQuery('#oView').html()
      });

      oView.placeAt('content');
    </script>
  </head>
  <body class="sapUiBody" role="application">
    <div id="content"></div>
  </body>
</html>

Answer 3

有几种方法可以做到这一点..但是对于您当前的代码，我建议如下：

您的问题的简短答案：

FilterBar具有方法join(data) { return this.http.post(this.apiEndPoint + 'session/join', JSON.stringify(data), {headers: this.headers}); }，您可以使用该方法获取过滤器项的控件，然后可以使用该方法获取选定的值。

determineControlByFilterItem

但是，在对这样的硬编码数组索引进行编码时要谨慎。为了更全面地解决您的问题，我在下面提出了一种完整的方法。

长答案，如果要使用过滤器栏过滤结果集：

首先，请确保过滤器项目的名称与要作为过滤依据的属性的名称对齐。因此，在您的情况下，您的过滤器项分别命名为“ A”和“ B” ...我建议您更改这些项以匹配要过滤的属性名称。假设要过滤的属性名称为“用户”和“位置”：

var oFilterItem = oEvent.getSource().getFilterItems()[0];
var oControl = oFilterBar.determineControlByFilterItem(oFilterItem);
var sSelectedValue = oControl.getSelectedKey();

然后，在控制器中，您可以使用这些名称来构建<FilterItem name="User" label="User"> ... <FilterItem name="Location" label="Location"> ...对象的数组，以用于过滤结果集。

sap.ui.model.Filter

我之所以建议使用这种方法而不是其他方法，是因为它可以很好地扩展。例如，假设您要添加第三个onSearch: function(oEvent) { //get the filter bar from the event var oFilterBar = oEvent.getSource(); //get the filter items from the filter bar var aFilterItems = oFilterBar.getFilterItems(); //map the array of FilterItems to a new array of sap.ui.model.Filter objects var aFilters = aFilterItems.map(function(oFilterItem) { //get the filter item name (which is now the same as the filter property name) var sFilterName = oFilterItem.getName(); //use the filter bar to get the control for the filter item var oControl = oFilterBar.determineControlByFilterItem(oFilterItem); //use the control to get the selected value (selected key) var sSelectedValue = oControl.getSelectedKey(); //use the filter item/property name and the selected value to create a new sap.ui.model.Filter var oFilter = new sap.ui.model.Filter(sFilterName, "EQ", sSelectedValue); //return the Filter object to the new array return oFilter }); //use the array of sap.ui.model.Filter objects to filter your table //if you're using a responsive table (sap.m.Table), use: this.getView().byId("yourTableId").getBinding("items").filter(aFilters); //or if you're using a grid table (sap.ui.table.Table), use: this.getView().byId("yourTableId").getBinding("rows").filter(aFilters); }控件以进行过滤，则只需添加一个新的Select。因为我们没有将任何内容硬编码到事件处理程序中，所以它无需更改就可以正常工作。

唯一要注意的是，如果您在FilterBar中使用不同类型的控件。因此，例如，如果您添加了<FilterItem name="NewFilterProperty" label="New Filter Property">而不是<Input>，则需要调整事件处理程序的逻辑以进行处理。

我通常这样做：

<Select>

SAPUI5过滤器栏获取过滤器栏中每个过滤器项目的过滤器值

3 个答案: