带有 WTF 和 Flask 的 Bootstrap 下拉菜单答案

【问题标题】：Bootstrap dropdown menu with WTF and Flask带有 WTF 和 Flask 的 Bootstrap 下拉菜单
【发布时间】：2020-09-01 15:20:52
【问题描述】：

我是构建 Flask/WTF/Jinja2（使用 Bootstrap）网站的业余爱好者，但我还没有实现下拉按钮。不幸的是，我真的在 Bootstrap / Jinja2 元素上苦苦挣扎（我可以将我的数据发送到 jinja2，但无法正确渲染任何东西）。如果它作为参考有帮助，我将从 Youtube 上的 Corey Schafer Flask 学校毕业。

这是我的 WTF 类声明：

class SegmentForm(FlaskForm):
     segmentID = SelectField(label='Choose a Segment', coerce=int, validators=[InputRequired])

这是我的路线（Flask）声明：

@decks.route('/decks/segments', methods=['GET'])
@login_required
def segments():
    form = SegmentForm()
    pathname = os.path.abspath(os.path.dirname(__file__))

    df = pd.read_csv(pathname + '/upload_data/segment_summary.csv', index_col=None)
    form.segmentID.choices = df.seg_name

我正在努力解决 Bootstrap / Jinja2：

    <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" id={{form.segmentID.label}}>
            {{ form.segmentID.label }}
        </button>
        <div class="dropdown-menu" aria-labelledby={{form.segmentID.label}}>
                {% for segment in form.segmentID.choices %}
                  <option value="{{ segment }}">{{ segment }}</option>
                {% endfor %}
        </div>
    </div>

【问题讨论】：

什么版本的 Bootstrap ？您的 Jinja for 循环正在输出 option 元素，但 Bootstrap 4 docs 使用具有适当类的常规 anchor 元素。

标签： twitter-bootstrap flask jinja2 flask-wtforms

【解决方案1】：

form.py:

from flask_wtf import FlaskForm
from wtforms import SubmitField, SelectField, SelectMultipleField, widgets
from wtforms.validators import DataRequired, NumberRange, InputRequired, Length
 
class MultiCheckboxField(SelectMultipleField):
     widget = widgets.ListWidget(prefix_label=False)
     option_widget = widgets.CheckboxInput()

class FindSegmentForm(FlaskForm):
     submit = SubmitField('Identify Segment for Deck')
     clear = SubmitField('Reset to Blanks')
     cards = MultiCheckboxField('Select Cards for Deck', coerce=int)

来自 routes.py：

card_list = list(zip(df.card_id.to_list(), df.card_names.to_list()))
form.cards.choices = card_list

来自 display.html：

{% for cards in form.cards %}
    <div class="form-check">
        {{ cards(class="form-check-input") }}
        {{ cards.label(class="form-check-label") }}
    </div>
{% endfor %}

感谢 ectrimble 提供的原始解决方案。 (https://gist.github.com/ectrimble20/468156763a1389a913089782ab0f272e)

【讨论】：