Question

我正在使用Django 2.x

我使用Formset能够在一个记录中添加多条记录。

表单在template文件中呈现为

{{ chapter_questions.as_table }}

哪个渲染下面的模板看起来很难看。

我使用Bootstrap模板将我的模板设计为

要像第二张图像一样渲染模板，我手动将字段写为

<div class="form-group">
    <div class="col-sm-12 col-xs-12">
        <label for="question">Word</label>
            <input name="chapterquestion_set-0-word" type="text" class="form-control border-color-2" placeholder="Word" id="question">

            {% if chapterquestion_set.word.errors %}
            <div class="row">
                <div class="col-sm-12">
                    <div class="alert alert-danger">
                        <ul>
                            {% for error in chapter_questions.word.errors %}
                            <li>{{ error }}</li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        {% endif %}

    </div>

    <div class="col-sm-12 col-xs-12">
        <label for="definition">Definition</label>
        <input name="chapterquestion_set-0-definition" type="text" class="form-control border-color-3" placeholder="Definition" id="definition">

        {% if chapter_questions.definition.errors %}
        <div class="row">
            <div class="col-sm-12">
                <div class="alert alert-danger">
                    <ul>
                        {% for error in chapter_questions.definition.errors %}
                        <li>{{ error }}</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
        {% endif %}
    </div>

    <div class="col-sm-12 col-xs-12">
        <label for="audio"></label>
        <input name="chapterquestion_set-0-audio" type="text" class="form-control border-color-4" placeholder="Audio" id="audio">

        {% if chapter_questions.audio.errors %}
        <div class="row">
            <div class="col-sm-12">
                <div class="alert alert-danger">
                    <ul>
                        {% for error in chapter_questions.audio.errors %}
                        <li>{{ error }}</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>

这样我就必须多次为多个对象编写代码。另外，对于添加新的对象字段，我需要使用JavaScript复制整个代码，方法是将1更新为索引号（在本例中为0）。

如何设置表单窗口小部件的样式，以便我可以利用Django自动字段插入和错误显示，只需要{{ chapter_questions.as_bootstrap_div }}来呈现引导程序窗体。

Answer 1

模板/场/文本field.html

<div class="col-sm-12 col-xs-12">
    {{field.label_tag}}
    <input name="{{field.name}}" type="text" class="form-control border-color-2" placeholder="{{field.label}}" id="{{field.name}}">

    {% if field.errors %}
    <div class="row">
        <div class="col-sm-12">
            <div class="alert alert-danger">
                <ul>
                    {% for error in field.errors %}
                    <li>{{ error }}</li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
    {% endif %}
</div>

在您的表单上

{% with chapterquestion_set.word as field %}
    {% include 'fields/text-field.html' %}
{% endwith %}

造型形式在Django中呈现

1 个答案: