如何使用 SearchField 过滤嵌套的 sap.m.Lists?

How to filter nested sap.m.Lists with a SearchField?

我创建了一个列表,里面还有两个列表。
这是粗略的结构(问题末尾的工作示例):

// Data structure
results: [{
  group: "1",
  children: [{
    group: "foo1",
    children: [{
      value1: "foo1.1",
      value2: "bar1.1"
    }, {
      value1: "foo1.2",
      value2: "bar1.2"
    }],
  }],
}]
// Element structure
List({
  items: {
    path: "/results",
    template: CustomListItem({
      content: List({
        path: "children",
        template: CustomListItem({
          content: List({
            path: "children",
            template: StandardListItem({
              title: "{value1}",
              info: "{value2}",
            })
          })
        })
      })
    })
  }
})

现在我想过滤最后一个列表中的项目,但我不知道该怎么做。

对于单个列表,我得到了它:

onSearch: function(oEvent) {
  var sQuery = oEvent.getSource().getValue();
  var oFilter = new sap.ui.model.Filter({
    filters: [
      new sap.ui.model.Filter("value1", sap.ui.model.FilterOperator.Contains, sQuery),
      new sap.ui.model.Filter("value2", sap.ui.model.FilterOperator.Contains, sQuery)
    ],
    and: false
  });
  var oBinding = this.byId("list-id").getBinding("items");
  oBinding.filter(oFilter, sap.ui.model.FilterType.Application);
}

但在我的例子中,value1value2 不直接在 "list-id" 列表中,而是在下面两个级别。

这是一个 link 的最小示例: https://jsfiddle.net/54xzbvsp/

正如评论所建议的那样,我找不到使用 Filter 对象的解决方案,所以我手动过滤了数据,结果如下:

onSearch: function(oEvent) {
    let sQuery = oEvent.getSource().getValue();
    let originalModel = this.getView().getModel();
    let originalDataCopy = JSON.parse(JSON.stringify(originalModel.oData));
    let filtered = originalDataCopy.results.filter(topGroup => {
      // Filter second level groups
      let filteredMidGroups = topGroup.children.filter(midGroup => {
        // Filter last Level
        let filteredSingleElements = midGroup.children.filter(singleElement => {
          let search = sQuery.toLowerCase();
          let valueFound = (
            singleElement.value1.toLowerCase().includes(search) ||
            singleElement.value2.toLowerCase().includes(search)
          );
          return valueFound;
        });
        midGroup.children = filteredSingleElements;
        return (filteredSingleElements.length > 0);
      });
      topGroup.children = filteredMidGroups;
      return (filteredMidGroups.length > 0);
    });
    let oModel = new sap.ui.model.json.JSONModel({
      results: filtered
    });
    this.getView().setModel(oModel, "filtered");
}

这里是完整的最小工作示例:https://jsfiddle.net/kh1fep3z/2/

它不适用于 json 型号的标准滤镜。

如果你有 3 层层次结构,你应该查看树。