使用Dynamic django formset嵌套的Inlineformset

时间:2018-06-13 16:28:27

标签: django

这与两个嵌套的内联表单集(子和地址)有关。在新图像中,您可以使用此处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 Flow

2 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 Flow

2 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>

0 个答案:

没有答案