Django formset.empty_forms动态添加表单

时间:2013-07-16 14:16:40

标签: jquery django forms django-forms

我正在使用django-dynamic-formset动态地向表单集添加表单 只要我在创建formset时有extra=1,这样就可以了 我喜欢做的是,在用户点击“添加表单”按钮之前,没有显示的形式。 这个recommended solution使用的是empty_forms,但由于某些原因不起作用(不工作意味着没有记录保存到数据库)。 在工作代码之后,不使用empty_form:

<div id="coding">
<div id="coding-inner">
    <form action="" method="post" accept-charset="utf-8" id="form"> 
        {% csrf_token %}
        {{ formset.management_form }}
        {% for form in formset %}
        <div class="form-container">
            <table border="0" cellspacing="5" cellpadding="5">
                <tr>
                    <td><label for="id_form-0-event_date">Event Date:</label></td>
                    <td>{{ form.event_date}}</td>
                </tr>
                <tr>
                    <td><label for="id_form-0-location">Location:</label></td>
                    <td><div class="location_wrapper">{{ form.location }}</div></td>
                </tr>
                <tr>
                    <td><label for="id_form-0-actors">Actors:</label></td>
                    <td>{{ form.actors }}</td>
                </tr>
                <tr>
                    <td><label for="id_form-0-num_participants">Number of Participants:</label></td>
                    <td>{{ form.num_participants }}</td>
                </tr>
                <tr>
                    <td><label for="id_form-0-issue">Issue:</label></td>
                    <td>{{ form.issue }}</td>
                </tr>
                <tr>
                    <td><label for="id_form-0-side">Side:</label></td>
                    <td>{{ form.side }}</td>
                </tr>
                <tr>
                    <td><label for="id_form-0-scope">Scope:</label></td>
                    <td>{{ form.scope }}</td>
                </tr>
                <tr>
                    <td><label for="id_form-0-part_violence">Participant Violence:</label></td>
                    <td>{{ form.part_violence}}</td>
                </tr>
                <tr>
                    <td><label for="id_form-0-sec_engagement">Security Forces Engagment:</label></td>
                    <td>{{ form.sec_engagement }}</td>
                </tr>
            </table>
        </div>
        {% endfor %}
        <div id="form-nav">
            <div id="save-stay">
                <input type="submit" name="coding_form_save" value="Save">
            </div>
            <div id="save-next">
                <input type="submit" name="coding_form_next" value="Save &#38; Next">
            </div>

        </div>
    </form>

</div>

<div id="pagination">
    <span class="step-links">
        {% if articles.has_previous %}
        <a href="?page={{ articles.previous_page_number }}">previous</a>
        {% endif %}

        <span class="current">
            Article {{ articles.number }} of {{ articles.paginator.num_pages }}.
        </span>
        {% if articles.has_next %}
        <a href="?page={{ articles.next_page_number }}">next</a>
        {% endif %}
    </span>
</div>


</div>

</div>

<script type="text/javascript">


           $(function() {
               $('.form-container').formset({
                   prefix: '{{ formset.prefix }}',
                   addText: 'add Event',
                   deleteText: 'delete Event'
               });
           })
</script>

现在使用empty_form的代码,这是无效的。 唯一的另一个区别是,对于使用empty_form的代码,extra设置为0而不是1。

<div id="coding">
<div id="coding-inner">
    {% with formset.empty_form as form %}
    <div id="form-container" style="display:none;">
        <table border="0" cellspacing="5" cellpadding="5">
            <tr>
                <td><label for="id_form-0-event_date">Event Date:</label></td>
                <td>{{ form.event_date}}</td>
            </tr>
            <tr>
                <td><label for="id_form-0-location">Location:</label></td>
                <td><div class="location_wrapper">{{ form.location }}</div></td>
            </tr>
            <tr>
                <td><label for="id_form-0-actors">Actors:</label></td>
                <td>{{ form.actors }}</td>
            </tr>
            <tr>
                <td><label for="id_form-0-num_participants">Number of Participants:</label></td>
                <td>{{ form.num_participants }}</td>
            </tr>
            <tr>
                <td><label for="id_form-0-issue">Issue:</label></td>
                <td>{{ form.issue }}</td>
            </tr>
            <tr>
                <td><label for="id_form-0-side">Side:</label></td>
                <td>{{ form.side }}</td>
            </tr>
            <tr>
                <td><label for="id_form-0-scope">Scope:</label></td>
                <td>{{ form.scope }}</td>
            </tr>
            <tr>
                <td><label for="id_form-0-part_violence">Participant Violence:</label></td>
                <td>{{ form.part_violence}}</td>
            </tr>
            <tr>
                <td><label for="id_form-0-sec_engagement">Security Forces Engagment:</label></td>
                <td>{{ form.sec_engagement }}</td>
            </tr>
        </table>
    </div>
    {% endwith %}
    <form action="" method="post" accept-charset="utf-8" id="form"> 
        {% csrf_token %}

        <div id="forms">

        </div>
        {{ formset.management_form }}
        <div id="form-nav">
            <div id="save-stay">
                <input type="submit" name="coding_form_save" value="Save">
            </div>
            <div id="save-next">
                <input type="submit" name="coding_form_next" value="Save &#38; Next">
            </div>
        </div>

    </form>

</div>

<div id="pagination">
    <span class="step-links">
        {% if articles.has_previous %}
        <a href="?page={{ articles.previous_page_number }}">previous</a>
        {% endif %}

        <span class="current">
            Article {{ articles.number }} of {{ articles.paginator.num_pages }}.
        </span>
        {% if articles.has_next %}
        <a href="?page={{ articles.next_page_number }}">next</a>
        {% endif %}
    </span>
</div>
</div>

<script type="text/javascript">
           $(function() {
               $('#forms').formset({
                   formTemplate: '#form-container',
                   prefix: '{{ formset.prefix }}',
                   addText: 'add Event',
                   deleteText: 'delete Event'
               });
           })

</script>

我错过了什么?

1 个答案:

答案 0 :(得分:-1)

您可以使用此jquery plugin