SAP UI5 sap.m.List列表过滤开发：基于格式化Icon的筛选需求

Got it, let's fix this filter issue for your sap.m.List. The core goal here is to mirror the exact logic you’re using in your Icon formatter so the filtered results match exactly what users see in the icons—no inconsistencies allowed.

先明确你的图标渲染逻辑 #

First, let's recap the logic from your formatter to make sure we align the filter perfectly:

• Show sap-icon://decline if:
  • inventory is falsy (empty/null/0) OR
  • date does not equal "31.12.9999"
• Show sap-icon://accept only if:
  • inventory exists (truthy) AND
  • date exactly matches "31.12.9999"

实现过滤器的代码方案 #

1. 构建对应的Filter实例

We’ll use sap.ui.model.Filter to create reusable filter objects that match the above logic:

// 过滤出显示"accept"图标的条目（双条件必须同时满足）
const acceptFilter = new sap.ui.model.Filter({
  filters: [
    new sap.ui.model.Filter("inventory", sap.ui.model.FilterOperator.NE, null), // inventory存在（非空）
    new sap.ui.model.Filter("date", sap.ui.model.FilterOperator.EQ, "31.12.9999") // 日期完全匹配
  ],
  and: true // 两个条件同时成立
});

// 过滤出显示"decline"图标的条目（任一条件满足即可）
const declineFilter = new sap.ui.model.Filter({
  filters: [
    new sap.ui.model.Filter("inventory", sap.ui.model.FilterOperator.EQ, null), // inventory为空
    new sap.ui.model.Filter("date", sap.ui.model.FilterOperator.NE, "31.12.9999") // 日期不匹配
  ],
  or: true // 满足任一条件即可
});

Note: If your inventory field is a number (and 0 counts as "no inventory"), swap the operator to LE with value 0 instead of EQ with null.

2. 应用过滤器到列表

To apply the filter, get your list's item binding and call the filter method. For example, if you have buttons to toggle filters:

// 假设你的列表ID是"myList"
const oList = this.byId("myList");
const oItemBinding = oList.getBinding("items");

// 显示所有"accept"状态的条目
oItemBinding.filter(acceptFilter);

// 切换到显示"decline"状态的条目
// oItemBinding.filter(declineFilter);

// 清除过滤器，显示所有条目
// oItemBinding.filter([]);

3. 可选：添加用户交互（比如下拉选择器）

If you want users to switch between filter modes, add a sap.m.Select and handle the change event:

XML视图代码

<sap.m.Select id="filterSelector" change="onFilterModeChange" selectedKey="all">
  <sap.m.Item key="all" text="显示所有条目"/>
  <sap.m.Item key="accept" text="显示已通过条目"/>
  <sap.m.Item key="decline" text="显示未通过条目"/>
</sap.m.Select>

<sap.m.List id="myList" items="{Model>/yourDataPath}">
  <!-- 你的列表项内容，包含Icon -->
</sap.m.List>

控制器方法

onFilterModeChange: function(oEvent) {
  const sSelectedMode = oEvent.getParameter("selectedItem").getKey();
  const oList = this.byId("myList");
  const oBinding = oList.getBinding("items");
  let oAppliedFilter = [];

  switch(sSelectedMode) {
    case "accept":
      oAppliedFilter = acceptFilter;
      break;
    case "decline":
      oAppliedFilter = declineFilter;
      break;
    default: // 显示所有
      oAppliedFilter = [];
  }

  oBinding.filter(oAppliedFilter);
}

关键注意点 #

• Always keep the filter logic 100% aligned with your formatter logic—this avoids cases where an icon shows "accept" but the filter excludes it (or vice versa).
• Adjust filter operators based on your actual data types (e.g., if inventory is a number instead of a nullable field, tweak the operator to match your definition of "no inventory").

内容的提问来源于stack exchange，提问作者user3042268