SAPUI5筛选栏获取筛选栏中每个筛选项的筛选值

Question

SAPUI5筛选栏获取筛选栏中每个筛选项的筛选值

4

我有一个带有多个筛选项的筛选栏，我需要在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
}

- tarzanbappa

你尝试获取筛选项的代码是什么？ - Nandan Chaturvedi

3个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- D. Seah · Answer 1

有几种方法可以做到这一点。在我看来，最好的方法是使用模型。这是采用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>

- I.B.N. · Answer 2

items的值在事件的参数中。

oEvent.getParameter('0').selectionSet

这是一个数组，其中包含了你可以使用的每个filterbar控件：

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

- Kyle · Answer 3

有几种方法可以实现这个.. 但根据您当前的代码，我建议以下操作：

回答您的问题：

FilterBar有一个方法determineControlByFilterItem，您可以使用它来获取筛选项的控件，然后可以使用该控件来获取选择的值。

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

请注意，硬编码数组索引时要小心。为解决您的问题，我在下面提供了一个更完整的方案。

如果你想使用过滤栏来过滤结果集，以下是详细解答：

首先，请确保过滤项的名称与您要过滤的属性名称对齐。因此，在您的情况下，您的过滤项名称为"A"和"B"... 我建议您将其更改为匹配要过滤的属性名称。假设您要过滤的属性名称是"User"和"Location"：

<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控件来进行过滤，你只需要添加一个新的<FilterItem name="NewFilterProperty" label="New Filter Property">。因为我们没有在事件处理程序中硬编码任何内容，所以即使没有任何额外的更改，它仍然可以正常工作。

唯一需要注意的是，如果在FilterBar中使用了不同类型的控件。例如，如果你添加了一个<Input>而不是<Select>，你需要调整事件处理程序的逻辑来处理这种情况。

通常我会这样做：

onSearch: function(oEvent) {
    var oFilterBar = oEvent.getSource();
    var aFilterItems = oFilterBar.getFilterItems();
    var aFilters = aFilterItems.map(function(oFilterItem) {
        var sFilterName = oFilterItem.getName();
        var oControl = oFilterBar.determineControlByFilterItem(oFilterItem);
        var sValue;
        if (oControl.getMetadata().getName() === "sap.m.Select") {
            sValue = oControl.getSelectedKey();
        } else if (oControl.getMetadata().getName() === "sap.m.Input") {
            sValue = oControl.getValue();
        }
        var oFilter = new sap.ui.model.Filter(sFilterName, "EQ", sValue);
        return oFilter;
    });

}

SAPUI5筛选栏 获取筛选栏中每个筛选项的筛选值

SAPUI5筛选栏获取筛选栏中每个筛选项的筛选值