Flask中如何保留含大量数据的渲染模板至其他路由并实现模态框

问题核心 #

当前点击表格行会跳转到新路由渲染模态框页面，导致页面刷新，无法实现模态框在搜索数据上方弹出的效果；同时因数据无法JSON序列化，无法通过session传递数据。

解决方案 #

直接将模态框嵌入show_data.html页面，利用模板已有的数据填充模态框内容，通过JavaScript控制模态框的显示/隐藏，无需额外路由跳转或数据传递。

修改后的代码 #

1. 移除冗余Flask路由

删除modal_popup路由，因为模态框将直接在搜索结果页实现：

# 移除以下路由
# @app.route('/search/<string:subject_in_box>/<int:row_id>')
# def modal_popup(row_id, subject_in_box):
#     return render_template('modal.html')

2. 修改show_data.html模板

添加模态框结构，并调整表格行的点击逻辑：

<!-- 引入Bootstrap依赖（若未引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- 搜索结果表格 -->
<table id="example" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th class="th-sm">xxxx</th>
      <th class="th-sm">xxx xxxOfer</th>
      <th class="th-sm">xxxx xxxvagas</th>
      <th class="th-sm">xxxx</th>
    </tr>
  </thead>
  <tbody>
    {% for item in data %}
      <tr class="clickable" onclick="openModal({{ item.row_id }}, '{{ item.classes }}', {{ item.offered }}, {{ item.demand }}, {{ item.available }})">
        <td>{{ item.classes }}</td>
        <td>{{ item.offered }}</td>
        <td>{{ item.demand }}</td>
        <td>{{ item.available }}</td>
      </tr>
    {% endfor %}
  </tbody>
</table>

<!-- 模态框结构 -->
<div class="modal fade" id="dataModal" tabindex="-1" aria-labelledby="dataModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="dataModalLabel">详情信息</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p><strong>Row ID:</strong> <span id="modalRowId"></span></p>
        <p><strong>Classes:</strong> <span id="modalClasses"></span></p>
        <p><strong>Offered:</strong> <span id="modalOffered"></span></p>
        <p><strong>Demand:</strong> <span id="modalDemand"></span></p>
        <p><strong>Available:</strong> <span id="modalAvailable"></span></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

<!-- 模态框控制脚本 -->
<script>
function openModal(rowId, classes, offered, demand, available) {
  // 填充模态框内容
  document.getElementById('modalRowId').textContent = rowId;
  document.getElementById('modalClasses').textContent = classes;
  document.getElementById('modalOffered').textContent = offered;
  document.getElementById('modalDemand').textContent = demand;
  document.getElementById('modalAvailable').textContent = available;
  
  // 显示模态框
  const modal = new bootstrap.Modal(document.getElementById('dataModal'));
  modal.show();
}
</script>

实现逻辑 #

• 模态框直接嵌入搜索结果页面，无需跳转新路由，自然悬浮在数据上方
• 点击表格行时，通过JavaScript将当前行的模板数据直接注入模态框，规避了数据序列化和session传递的问题
• 借助Bootstrap模态框组件快速实现弹出/隐藏交互，无需手动编写复杂样式和逻辑

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