【问题标题】:SAPUI5 Filter Bar Get filter values for each filter item in the filter barSAPUI5过滤栏获取过滤栏中每个过滤项的过滤值
【发布时间】:2020-08-26 00:34:30
【问题描述】:

我有一个包含多个过滤器项的过滤器栏,我需要在 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
}

【问题讨论】:

  • 您尝试获取过滤器项的代码是什么?

标签: sapui5


【解决方案1】:

有几种方法可以做到这一点。 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>

【讨论】:

  • 这是一种获得预期结果的低效方式,并且在可扩展性方面没有提供太多
  • 真的吗?为什么不扩展?
  • 对于像 MultiInput 控件这样的东西,您将很难使用 JSON 模型来设置/获取标记的值
  • SAPUI5 中的每个控件都可以将值绑定到模型。这就是 SAPUI5 的美妙之处,我们分离了视图和控制器。我们不希望控制器有代码直接从控件中获取值。通过这种方式,控件可以更改,而控制器代码保持不变。我们今天有一个 sap.m.Select,明天有一个 sap.m.Input。视图发生变化,控制器实现保持不变。
  • 我基本同意。但在某些情况下,这并不完全正确。例如,如果您要添加具有多个标记的 MultiInput 控件,则控制器必须在 JSON 模型中维护一组标记值。或者一个只允许绑定到 selectedIndex 的 RadioButtonGroup,控制器需要使用 selectedIndex 来获取所选单选按钮的文本。
【解决方案2】:

items 的值在 de Event 的参数上。

oEvent.getParameter('0').selectionSet

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

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

【讨论】:

  • 虽然这是获取值的一种方法,但应避免对数组索引进行硬编码
  • 我不说硬编码,只是告诉他过滤器在哪里,有获取字段名称的方法
【解决方案3】:

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

对您的问题的简短回答:

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

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

不过,在对这样的数组索引进行硬编码时要小心。为了更完整地解决您的问题,我在下面建议了一个完整的方法。

如果您想使用过滤器栏过滤结果集,答案很长:

首先,确保过滤器项目的名称与您要过滤的属性的名称一致。因此,在您的情况下,您的过滤器项目被命名为“A”和“B”......我建议您更改它们以匹配您要过滤的属性名称。假设您要过滤的属性名称是“用户”和“位置”:

<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 控件作为过滤依据,您只需添加一个新的&lt;FilterItem name="NewFilterProperty" label="New Filter Property"&gt;。因为我们没有将任何东西硬编码到事件处理程序中,所以它仍然可以在没有任何额外更改的情况下工作。

唯一需要注意的是您是否在 FilterBar 中使用了不同类型的控件。因此,例如,如果您添加了 &lt;Input&gt; 而不是 &lt;Select&gt;,则需要调整事件处理程序的逻辑来处理此问题。

我通常会这样做:

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

}

【讨论】:

    猜你喜欢
    • 2021-01-13
    • 1970-01-01
    • 1970-01-01
    • 2022-10-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多