这与两个嵌套的内联表单集(子和地址)有关。在新图像中,您可以使用此处https://pypi.org/project/django-dynamic-formsets/中的动态django formset查看带有“add child”和外部“remove”选项的嵌套表单。当我单击“添加子”时,应该有第二个嵌套表单,类似于具有自己的地址内联表单集的第一个子表单。如果我单击外部“删除”,则子项和assoc。地址应该删除。当我点击“添加地址”时,应该为孩子添加第二个地址字段。我已附上以下示例代码。
期望的结果:
Basic Flow 1 basicDescription:________________ - Remove Basic Flow Alt Flow: altDescription:______________ - Remove Alt Flow + Add Alt Flow2 basicDescription:________________ - Remove Basic Flow Alt Flow: altDescription:______________ - Remove Alt Flow + Add Alt Flow
+ Add Basic Flow
当前结果:(注意第二个孩子缺少“ - 删除地址”和“+添加地址”。
Basic Flow 1 basicDescription:________________ - Remove Basic Flow Alt Flow: altDescription:______________ - Remove Alt Flow + Add Alt Flow2 basicDescription:________________ - Remove Basic Flow Alt Flow: altDescription:______________
+ Add Basic Flow
这是我的template.html中的表单
<form method="POST" enctype="multipart/form-data" style="margin-left: 40px; margin-right: 40px">
{% for hidden_field in form.hidden_fields %}
{{ hidden_field.errors }}
{{ hidden_field }}
{% endfor %}
{% csrf_token %}
{{ form.management_form }}
{{ form.non_form_errors }}
<hr style = "border: 0; border-top: 1px solid #999; margin: 1em 0;">
<h4>Use Case Profile</h4>
<div style="margin-left: 10px;">
{{ form.as_p }}
</div>
<hr style = "border: 0; border-top: 1px solid #999; margin: 1em 0;">
<h4>Actors</h4>
<dl>
<dd class="actor-formset {{ actor_form.prefix }}">
{{ actor_form.management_form }}
{{ actor_form.non_form_errors }}
{% for form in actor_form %}
<div style="margin-left: 10px;">
{{ form.actorName.errors }}
{{ form.actorName.label_tag }}
{{ form.actorName }}
{{ form.actorType.errors }}
{{ form.actorType.label_tag }}
{{ form.actorType }}
</div>
{% endfor %}
</dd>
</dl>
<hr style = "border: 0; border-top: 1px solid #999; margin: 1em 0;">
<h4>{% trans "Basic Flow:" %}</h4>
<dl>
<dd class="basicflow-formset {{ basicflow_form.prefix }}" >
{{ basicflow_form.management_form }}
{{ basicflow_form.non_form_errors }}
{% for form in basicflow_form %}
<div>{{ form.description.errors }}
{{ form.description.label_tag }}
{{ form.description }}
<h5 style="margin-left: 40px;">{% trans "Alt Flow:" %}</h5>
{% if form.nested %}
{{ form.nested.management_form }}
{{ form.nested.non_form_errors }}
{% for nested_form in form.nested.forms %}
<div class="alternateflow-formset {{ form.nested.prefix }}">
<div style="margin-left: 40px;">{{ nested_form }} </div>
{% endfor %}
{% endif %}
</div>
</div>
{% endfor %}
</dd>
</dl>
<hr style = "border: 0; border-top: 1px solid #999; margin: 1em 0;">
<a class="btn-flat" href="{% url 'useCaseExtract:UseCaseHome' %}">Cancel</a>
<input class="btn" type="submit" value="Create" />
</form>
<script src="{% static 'dynamic_formsets/jquery.formset.js' %}" type="text/javascript"> </script>
<script>
// Add additional fields to formsets
$(function () {
$('.actor-formset').formset({
prefix: '{{ actor_form.prefix }}',
//addButtonHolder:'.add-actor',
formCssClass: 'dynamic-actor-formset',
uiText:{addPrompt: '{% icon 'plus' %} {% trans "Actor" %}', removePrompt: '{% icon 'trash' %} {% trans "Actor" %}'},
deleteCssClass: 'delete-actor'
});
$('.basicflow-formset').formset({
prefix: '{{ basicflow_form.prefix }}',
//addButtonHolder:'.add-basic',
formCssClass: 'dynamic-basicflow-formset',
uiText:{addPrompt: '{% icon 'plus' %} {% trans "Basic Flow" %}', removePrompt: '{% icon 'trash' %} {% trans "Basic Flow" %}'},
deleteCssClass: 'delete-basicflow'
});
$('.alternateflow-formset').formset({
prefix: '{{ alternateflow_form.prefix }}',
//addButtonHolder:'.add-basic',
formCssClass: 'dynamic-alternateflow-formset',
uiText:{addPrompt: ' {% icon 'plus' %} {% trans "Alt Flow" %}', removePrompt: '{% icon 'trash' %} {% trans "Remove Alt Flow" %}'},
deleteCssClass: 'delete-alternateflow'
});
});
</script>