DjangoJquery.formset：当使用 "add new "按钮时，如何在fomrset的表单之间留出空格？

Question

我在使用Jquery.formset时遇到了一个 "化妆品 "问题。

我有一个嵌套的子表单(formeset)，我使用JQuery添加(或移除)子表单(移除和添加新按钮)。

问题 "是添加了子表格，但折叠了

我想添加新的子表格，但不知道如何进行......

谢谢你的帮助

html

{% extends 'layouts/base.html' %}
{% load static %}
{% load crispy_forms_tags %}
{% load widget_tweaks %}
{% block extrahead %}{% endblock %}
{% block title %}Utilisateurs | Mereva{% endblock %}
{% block content %}

<!-- Source code: https://codewithmark.com/easily-edit-html-table-rows-or-cells-with-jquery -->
<!-- Source code: https://whoisnicoleharris.com/2015/01/06/implementing-django-formsets.html -->
<div class='container'>
    <br>        
    <br>
    <h1 id="utilisateur" data-parameters="">Formulaire utilisateur</h1>
    <br><br>

    <div class="row">
    </div>
    <form id="utilisateureditform" method="POST" class="post-form">
        {% csrf_token %}
        {{ form|crispy }}
        <br><br><div class="dropdown-divider"></div><br><br>
        <h2>Applications</h2><br><br>
        <!-- {{ application|crispy }} -->

        {{ application.management_form }}
        <div class="row">
            <div class="col-6">Nom de l'application</p></div>
            <div class="col-5"><p>Droits</p></div>
            <div class="col-1"></div>
        </div>      
        {% for application_form in application %}

        <div class="row link-formset">
            {% if application_form.instance.pk %}{{ application_form.DELETE }}{% endif %}
            <div class="col-6">

                    {{ application_form.app_app_nom }}
                    {% if application_form.app_app_nom.errors %}
                        {% for error in application_form.app_app_nom.errors %}
                            {{ error|escape }}
                        {% endfor %}
                    {% endif %}

            </div>
            <div class="col-5">

                    {{ application_form.app_dro }}
                    {% if application_form.app_dro.errors %}
                        {% for error in application_form.app_dro.errors %}
                            {{ error|escape }}
                        {% endfor %}
                    {% endif %}

            </div>
            <div class="hidden">{{ application_form.app_ide }}</div>
        </div><br>
        {% endfor %}

        {% if application.non_form_errors %}
            {% for error in application.non_form_errors %}
                {{ error|escape }}
            {% endfor %}
        {% endif %} 

        <br>
        <input class="btn btn-primary" type="submit" value="Valider" style="width: 100px;">
        <a data-modal data-target="" class="btn btn-danger" href="{% url 'project:index' %}" style="width: 100px;">Annuler</a>
    </form>

{% endblock %}
{% block extrabody %}
<script src="{% static 'project/js/jquery.formset.js' %}"></script>
<script type="text/javascript">

    $('.link-formset').formset({
        addText: 'Ajouter',
        deleteText: 'Supprimer',
        prefix: '{{ application.prefix }}'
    });

    $(document).ready(function() {
        $('html body div.container form#utilisateureditform.post-form a.add-row').before('<br>');
    });


</script>
{% endblock %}

Answer 1

使用CSS对应用程序的展示层进行分类和管理。

一个新的CSS类可以帮助创建你需要的空间。

将该类添加到你的 <div>.

{{ application.management_form }}
<div class="row make-space-below">

然后添加一个 <style> 标签到你的模板。

<style>
    .make-space-below {
        margin-bottom: 50px;
    }
</style>

这有点黑。一般来说，你应该尝试在你的模板中加入一个 .css 文件，存放你的样式。的 .css 文件可以缓存在浏览器中，减少对服务器的请求和您的文件的大小。.html 文件。