0

在带有Bootstrap-Flask扩展的 Flask 应用程序中，当表单的 HTML 使用自动呈现时，如何使用 WTForms 的render_kwrender_form()类参数覆盖默认样式？[*]

我定义了这个简单的表单，它提供了一个确认删除数据库记录的按钮，我希望该按钮为红色而不是标准的灰色：

class DeleteMappingForm(FlaskForm):
    submit = SubmitField(_l('Delete mapping'))

自动生成的 HTML（只关注<input>元素）是：

<input class="btn btn-secondary btn-md" id="submit" name="submit" type="submit" value="Delete mapping">

我想使用btn-alert而不是默认的btn-secondary Bootstrap 类来以红色而不是灰色显示按钮。WTForms 定义“将在渲染时提供给小部件的关键字”的方式是将它们作为 dict 传递给render_kw. 这可以很好地添加新关键字，但它不会替换现有的，我尝试这样做：

class DeleteMappingForm(FlaskForm):
    submit = SubmitField(_l('Delete mapping'), render_kw={'class':'btn btn-alert btn-md'})

最后将我定义的 CSS 类添加到预定义的 CSS 类列表中，最后得到以下 HTML：

<input class="btn btn-secondary btn-md btn btn-alert btn-md" id="submit" name="submit" type="submit" value="Delete mapping">

有没有办法让传递的值render_kw覆盖默认类，并且只有class="btn btn-alert btn-md"？

额外的信息

看看WTFormsrender_kw是如何处理的，似乎应该覆盖这些值（dict 被连接起来，它覆盖了相同的键，例如：

>>> a={"class":"abc", "other":"aaa"}
>>> a
{'class': 'abc', 'other': 'aaa'}
>>> b={"class":"def", "other":"aaa"}
>>> b
{'class': 'def', 'other': 'aaa'}
>>> dict(a, **b)
{'class': 'def', 'other': 'aaa'}

我也无法在Bootstrap-Flask处理render_form()...

[*] 我使用的是Bootstrap-Flask扩展而不是原来的 Flask-Bootstrap，因为后者很遗憾不支持 Bootstrap 4+。render_form()是Flask-Bootstrap 的Bootstrap-Flask 等价物quick_form()。

4

1 回答 1

1

原来解决方案可以在 Bootstrap-Flask 一侧找到，并且它已经为宏提供了一个button_style参数render_form，允许直接传递一个 Bootstrap 类。

以下模板为我提供了我正在寻找的红色按钮；）就这么简单......

{% extends "base.html" %}
{% import 'bootstrap/form.html' as wtf %}

{% block app_content %}
    <h1>{{ title }}</h1>
    <div class="row">
        <div class="col-lg-8">
            {{ wtf.render_form(form, button_style="danger") }}
        </div>
    </div>
{% endblock %}

好吧，这有点尴尬 - 但我很高兴找到了解决方案，这对于花时间写这个问题来说太糟糕了，但因为这可能会帮助其他面临同样挑战的人，所以我在这里添加我的答案。

于 2020-05-22T10:49:12.563 回答