如何使用 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);
}
但在我的例子中,value1
和 value2
不直接在 "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 层层次结构,你应该查看树。
我创建了一个列表,里面还有两个列表。
这是粗略的结构(问题末尾的工作示例):
// 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);
}
但在我的例子中,value1
和 value2
不直接在 "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 层层次结构,你应该查看树。