在双层foreach循环中实现下拉框选中已保存映射值

核心思路 #

1. 预加载映射选项：一次性从数据库获取所有可选的mappedValue（如M1、M2、M3）并缓存到内存，避免重复查询。
2. 转换已存映射为字典：将数据库中已保存的映射记录，转换成{xcoord-ycoord: mappedValue}的键值对结构，通过坐标组合键实现O(1)时间复杂度的已选值查找，替代低效的内层循环遍历。
3. 分层渲染下拉框：外层遍历横向需求、中层遍历纵向成果，每个单元格通过坐标键快速匹配已选值，再遍历预加载的选项列表生成下拉框，确保未映射项显示完整选项。

具体实现示例 #

后端数据预处理（以Python为例）

# 1. 预加载所有映射选项（仅查询一次）
all_mapping_options = ["M1", "M2", "M3"]  # 若选项存在数据库，执行一次查询后缓存
# 示例：all_mapping_options = [opt.value for opt in MappingOption.query.all()]

# 2. 将已保存的映射转换为坐标-值字典
saved_mappings = [
    {"xcoord": 1, "ycoord": 1, "mappedValue": "M2"},
    {"xcoord": 2, "ycoord": 2, "mappedValue": "M3"}
]  # 从数据库查询的结果
saved_map = {}
for item in saved_mappings:
    key = f"{item['xcoord']}-{item['ycoord']}"
    saved_map[key] = item["mappedValue"]

# 将数据传递给前端模板
# 假设demands是横向需求列表，outcomes是纵向成果列表

前端渲染（以Jinja2模板为例）

<table class="mapping-matrix">
  <thead>
    <tr>
      <th></th>
      {% for demand in demands %}
      <th>{{ demand.name }}</th>
      {% endfor %}
    </tr>
  </thead>
  <tbody>
    {% for outcome in outcomes %}
    <tr>
      <td>{{ outcome.name }}</td>
      {% for demand in demands %}
      <td>
        <select name="mapping-{{ demand.xcoord }}-{{ outcome.ycoord }}">
          {% for option in all_mapping_options %}
          <option value="{{ option }}" 
            {% if saved_map.get(f"{demand.xcoord}-{outcome.ycoord}") == option %}selected{% endif %}>
            {{ option }}
          </option>
          {% endfor %}
        </select>
      </td>
      {% endfor %}
    </tr>
    {% endfor %}
  </tbody>
</table>

关键优势 #

• 性能优化：映射选项仅查询一次数据库，已存映射的查找从O(n)降为O(1)，即使矩阵包含数百条需求/成果，也不会出现性能瓶颈。
• 解决核心问题：未映射的下拉框会完整显示所有选项，不会为空；选项列表仅遍历一次，避免重复渲染。
• 维护性强：数据处理与渲染逻辑分离，代码结构清晰，便于后续调试和扩展。

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