Question

在长时间研究了flask-admin和wtforms的文档和源代码之后，我仍然无法理解如何改变flask-admin模型表单中输入字段的大小。

根据wtf“速成课程”页面，应该可以传递到模板中的表单字段css参数，像这样（jinja2示例）：

<form method="POST" action="/login">
    <div>{{ form.username.label }}: {{ form.username(size="10") }}</div>
    <div>{{ form.password.label }}: {{ form.password() }}</div>
</form>

但是，使用Flask-Admin表单字段/模板似乎不可能。至少我没有找到一个体面的方法来做到这一点

任何建议都将不胜感激

Answer 1

一个选项是在模型视图中使用.post，一个包含模型表单字段属性的字典。

例如，对于'MyItem'模型的'description'字段，textarea有20行：

form_widget_args

请参阅http://flask-admin.readthedocs.org/en/latest/api/mod_model/

通过指定class MyItemView(ModelView): form_widget_args = { 'description': { 'rows': 20 } }，也可以完全替换输入字段。例如，用单行输入字段替换textarea：

form_overrides

见http://flask-admin.readthedocs.org/en/latest/advanced/， http://wtforms.readthedocs.org/en/latest/fields.html

Answer 2

如果您从ModelView扩展flask.ext.admin.contrib.sqla课程，则可以覆盖所用模板的值。您可以覆盖模型的列表视图，创建视图或编辑视图，如下所示：

class CustomAdminView(ModelView):
    list_template = "list_template.html"
    edit_template = "edit_template.html"
    create_template = "create_template.html"
    ...

您需要自己创建每个模板，并且可以扩展默认管理模板以使其与所有定制的管理视图保持一致。因此，示例模板将是：

<style type="text/css">
    .select2-container, .select2-container-active, #title, #author, #description {
        width: 75% !important;
    }
    .controls div input {
        height: 40px;
    }
    .select2-search-choice {
        width: 90%;
    }
    #visible {
        float: left;
        text-align: left;
    }
</style>
{% extends 'admin/model/edit.html' %}

注意最后一行：{% extends 'admin/model/edit.html' %}，它扩展了Flask Admin的默认编辑视图。您可以更改edit或list的{{1}}来扩展这些视图。

希望能够解决问题。

如何使用flask-admin更改输入字段大小

2 个答案: