文章/答案/技术大牛

发布

社区首页 >问答首页 >SAPUI5筛选栏获取筛选栏中每个筛选项的筛选值

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

Stack Overflow用户

提问于 2018-08-01 18:52:07

回答 3查看 5.7K关注 0票数 3

我有一个包含多个筛选项的筛选栏，我需要获取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

回答 3

Stack Overflow用户

发布于 2018-08-02 01:50:08

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

票数 0

Stack Overflow用户

发布于 2018-08-01 20:31:41

items的值在de Event的参数上。

oEvent.getParameter('0').selectionSet

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

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

票数 -1

Stack Overflow用户

发布于 2018-08-02 06:50:42

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

你问题的简短答案：

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

}

票数 -2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51631457

复制

相似问题

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

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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