如何在SAPUI5中对多个列进行表格筛选

Question

我遇到了一个在SAPUI5中无法解决的问题。

我有一个带有工具栏的表格，其中包含一个文本字段。该字段的值用于过滤表格的所有列。 我知道我必须创建多个自定义过滤器。但我不知道如何将所有部件组合在一起。因此，我创建了以下方法：

filtering : function(value, oEvent) {
    var oFilter1 = new sap.ui.model.Filter(this.byId("Column1"), sap.ui.model.FilterOperator.Contains, value);
    var oFilter2 = new sap.ui.model.Filter(this.byId("Column2"), sap.ui.model.FilterOperator.Contains, value);
    var oFilter3 = new sap.ui.model.Filter(this.byId("Column3"), sap.ui.model.FilterOperator.Contains, value);
    var oFilter4 = new sap.ui.model.Filter(this.byId("Column4"), sap.ui.model.FilterOperator.Contains, value);
    var allFilter = new sap.ui.model.Filter([oFilter1, oFilter2, oFilter3, oFilter4], false); 
    var oBinding = oEvent.getSource().getBinding("items");
    oBinding.filter(allFilter);
}

我在这里找到了答案

这种方法是从文本字段的liveChange事件中调用的。 我不知道是否需要oEvent。

"new sap.ui.model.Filter()"的第一个参数是什么？ 我以为它是需要的列。 新筛选器必须在哪里触发？ 我会使用“table.filter(allFilter)”。

我想，我只需要一点解释...

- Gorch

---

嗨@Gorch：我看不到您是否接受了任何答案来回答您的问题。是否有哪个回复解决了您的问题？ - Pille

Answer 1

1. Column1, Column2, Column3, and Column4是您列的绑定路径。
2. 过滤器不需要使用oEvent参数。
3. 您不能调用 table.filter(allFilter)，table.filter(oEvent) 是事件处理程序，在表格被过滤时触发。您应该调用 sap.ui.model.ListBinding 的 filter 方法来过滤表格。

请参考以下代码：

liveChange:function(oEvent) {
    var newValue = oEvent.getParameter("liveValue");
    filtering(newValue);
},

filtering : function(value) {
   var oFilter1 = new sap.ui.model.Filter("Column1", sap.ui.model.FilterOperator.Contains, value);
   var oFilter2 = new sap.ui.model.Filter("Column2", sap.ui.model.FilterOperator.Contains, value);
   var oFilter3 = new sap.ui.model.Filter("Column3", sap.ui.model.FilterOperator.Contains, value);
   var oFilter4 = new sap.ui.model.Filter("Column4", sap.ui.model.FilterOperator.Contains, value);
   var allFilter = new sap.ui.model.Filter([oFilter1, oFilter2, oFilter3, oFilter4], false); 
   var oBinding = oEvent.getSource().getBinding("items");
   oBinding.filter(allFilter);
}

- Haojie

---

它可以工作。但我总是收到错误消息“为筛选器定义了错误的参数。-”。对于列，我将绑定路径更改为绑定到其上的属性。你有什么线索，缺少/错误了什么？ - Gorch

它运行了但是抛出了错误，你的意思是什么？哪一行出错了？ - Haojie

Answer 2

很抱歉回复晚了，但我刚刚自己解决了这个问题。您需要一个按钮来与文本字段一起使用。以下是应该使其正常工作的代码：

var oButton = new sap.ui.commons.Button({
    text: "find",
    styled: false,
    press: function () {
        var oFilter1 = new sap.ui.model.Filter("Column1",  sap.ui.model.FilterOperator.Contains, oInput.getValue());
        var oFilter2 = new sap.ui.model.Filter("Column2", sap.ui.model.FilterOperator.Contains, oInput.getValue());
        var oFilter3 = new sap.ui.model.Filter("Column3", sap.ui.model.FilterOperator.Contains, oInput.getValue());
        var oFilter4 = new sap.ui.model.Filter("Column4", sap.ui.model.FilterOperator.Contains, oInput.getValue());
        var allFilter = new sap.ui.model.Filter([oFilter1, oFilter2, oFilter3, oFilter4], oInput.getValue());
        oTable.getBinding("rows").filter(allFilter);
     }
}).placeAt("search");

您可能需要将oInput更改为您命名的文本字段。您还可能需要更改放置按钮的位置。这是帮助我解决问题的链接 http://jsbin.com/xinucunidi/1/edit

- Anthony

Answer 3

要在模型的完整节点上操作谓词，我发现您可以在oFilterInfo中传递：path: false。例如：

 new sap.ui.model.Filter({
        path:false,
        test: function (oNode) {
            console.log("In filter");
            console.log(oNode);
          return true; // result may depend on all properties of the node
      }})

这些信息可能有用，也可能没有用，不带任何保证；）

- Markus Ulke

Answer 4

您还可以传递一个空字符串到过滤器构造函数中，以便访问整个节点。

以下是使用自定义过滤器函数对客户端和联系人进行过滤的示例代码。这在建议中使用时隐藏重复项很有意义。除非您真的只想要一行，否则您可能不想将其用于过滤表格。

    //Help function to handle the suggest events of the client search field ## handles duplicates ! ##
handleSuggestClient: function(oEvent){
    var sValue = oEvent.getParameter("suggestValue");
    var filters = [];
    var uniqueNames = [];
    filters = [new sap.ui.model.Filter([
            new sap.ui.model.Filter("", function(oNode) { // blank first param passes in entire node to test function
                var sVal = ((oNode.client + oNode.contact) || "").toUpperCase()
                if (uniqueNames.indexOf(sVal) === -1){
                    uniqueNames.push(sVal);
                    return sVal.indexOf(sValue.toUpperCase()) > -1;
                } else {
                    return false;
                }
            })
    ], false)];
    this.oSFClient.getBinding("suggestionItems").filter(filters);
    this.oSFClient.suggest();
},

- Vanquished Wombat