文章/答案/技术大牛

发布

社区首页 >问答首页 >Django中的样式表单呈现

问Django中的样式表单呈现
EN

Stack Overflow用户

提问于 2018-03-25 20:10:33

回答 1查看 69关注 0票数 1

我正在使用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复制整个代码，将索引号(在本例中为0)替换为1。

如何设置表单小部件的样式，以便能够利用Django自动字段插入和错误显示的好处，并且只需要{{ chapter_questions.as_bootstrap_div }}来呈现引导表单。

django

django-templates

回答 1

Stack Overflow用户

发布于 2018-03-25 20:44:14

模板/字段/文本-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 %}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/49475675

复制

相似问题

问Django中的样式表单呈现
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Django中的样式表单呈现EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Django中的样式表单呈现
EN