在Django模板中处理动态嵌套的内联表单集

Question

我要添加父级，并动态添加相关的子级，然后单击（添加子级）将其添加到相关的父级。

我目前正在使用“ django-dynamic-formset”

我的模板：

{% load crispy_forms_tags %}
{% load staticfiles %}
<table class="col-md-9" style="margin-left: 10px;">
{{ formset.management_form|crispy }}

    {% for form in formset.forms %}
            <tr class="formset_row-{{ formset.prefix }}">
                {% for field in form.visible_fields %}
                <td>
                    {# Include the hidden fields in the form #}
                    {% if forloop.first %}
                        {% for hidden in form.hidden_fields %}
                            {{ hidden }}
                        {% endfor %}
                    {% endif %}
                    {{ field.errors.as_ul }}
                    {{ field|as_crispy_field }}
                </td>
                {% endfor %}
            </tr>

    <!--nested form-->
    {% if form.nested %}
        {{ form.nested.management_form }}
        {{ form.nested.non_form_errors }}

        {% for nested_form in form.nested.forms %}

            <tr class="{% cycle 'row1' 'row2' %} formset_child-{{ formset.prefix }}">
                {% for fields in nested_form.visible_fields %}
                <td>
                    {# Include the hidden fields in the nested_form #}
                    {% if forloop.first %}
                        {% for hidden in nested_form.hidden_fields %}
                            {{ hidden }}
                        {% endfor %}
                    {% endif %}
                    {{ fields.errors.as_ul }}
                    {{ fields|as_crispy_field }}
                </td>
                {% endfor %}
            </tr>

        {% endfor %}

    {% endif %}
    <!-- end of nested form-->

    {% endfor %}

</table>
<br>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="{% static 'mycollections/libraries/django-dynamic-formset/jquery.formset.js' %}"></script>
<script type="text/javascript">
    $('.formset_row-{{ formset.prefix }}').formset({
        addText: 'add parent',
        deleteText: 'remove parent',
        prefix: '{{ formset.prefix }}',
    });
</script>
<script type="text/javascript">
    $('.formset_child-{{ formset.prefix }}').formset({
        addText: 'add child',
        deleteText: 'remove child',
        prefix: '{{ formset.prefix }}',
    });
</script>

，但先前的模板添加了与孩子分开的父母（它在彼此之后添加父母，并在远离相关父母的情况下彼此添加孩子）。 例如 -父母1 -父母2 -孩子 -孩子 -孩子 预期的行为： -父母1   -孩子   -孩子 -父母2   -孩子

如何管理这种行为？