Flask提交表单后保留左侧复选框及选中状态求助

问题根源 #

提交后左侧复选框消失，是因为后端generate接口返回模板时，没有传递table_names数据，导致前端循环渲染复选框的逻辑无法执行；同时没传递已选中的表格列表，没法维持选中状态。

1. 后端代码修改 #

需要在generate函数里，把表格名称列表和已选中的表格列表都传给模板：

@app.route('/')
def index():
    table_names = get_table_names()
    return render_template('combined.html', table_names=table_names, db_name=database)

@app.route('/generate', methods=['POST'])
def generate():
    import time
    selected_tables = request.form.getlist('table')
    # 你的业务逻辑代码......
    
    # 必须获取所有表格名称，传给模板用来渲染复选框
    table_names = get_table_names()
    return render_template('combined.html', 
                           tables=[data_dict.to_html(classes='data')], 
                           titles=[''],
                           graph_done=graph_done,
                           table_names=table_names,  # 新增：传递表格名称列表
                           selected_tables=selected_tables)  # 新增：传递已选中的表格列表

2. 前端代码修改 #

删掉多余的隐藏字段，通过Jinja2的条件判断给已选中的复选框添加checked属性：

<body>
    <div id = "container">
  <div class="left">
    <form method="post" action="/generate">
        {% for table_name in table_names %}
        <input type="checkbox" name="table" value="{{ table_name }}" 
               {% if table_name in selected_tables %}checked{% endif %}>
        {{ table_name }}<br>
        {% endfor %}
        <input type="submit" value="Generate">
    </form>
  </div>
  <div class="right">
      {% if tables %}
        {% for table in tables %}
            {{ titles[loop.index] }}
            <table class="table-container" style="margin: 0 auto;"> <!-- Center the table -->
                {{ table|safe }}
            </table>
    {% endfor %}
    {% endif %}
  </div>
    </div>
</body>

说明 #

• 后端传递table_names保证复选框能正常渲染，传递selected_tables用来标记已选中的项。
• 前端通过{% if table_name in selected_tables %}checked{% endif %}实现选中状态的保留，用户提交后可以直接修改复选框再重新生成。

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