django-formset-js 0.5.0

包含JavaScript库

jQuery和此库都必须包含在您的页面上。最简单的方法是将脚本作为表单的媒体依赖项添加。

from djangoformsetjs.utils import formset_media_js

class MyForm(forms.Form):
    class Media(object):
        js = formset_media_js + (
            # Other form media here
        )

MyFormSet = formset_factory(MyForm)

然后在您的模板中包含表单的媒体

{{ formset.media }}

或者，只需添加脚本标签

<script src="{{ STATIC_URL }}js/jquery.js"></script>
<script src="{{ STATIC_URL }}js/jquery.formset.js"></script>

渲染表单集

为了使库能与您的表单集一起工作，您的表单集中的某些部分需要使用 data-formset-... 属性进行标记

{% load formset_tags %}

<div id="formset" data-formset-prefix="{{ formset.prefix }}">
    {{ formset.management_form }}

    <div data-formset-body>
        <!-- New forms will be inserted in here -->
        {% for form in formset %}
            <div data-formset-form>
                {{ form }}
                <button type="button" data-formset-delete-button>Delete form</button>
            </div>
        {% endfor %}
    </div>

    <!-- The empty form template. By wrapping this in a <script> tag, the
    __prefix__ placeholder can easily be replaced in both attributes and
    any scripts -->
    <script type="form-template" data-formset-empty-form>
        {% escapescript %}
            <div data-formset-form>
                {{ formset.empty_form }}
                <button type="button" data-formset-delete-button>Delete form</button>
            </div>
        {% endescapescript %}
    </script>

    <!-- This button will add a new form when clicked -->
    <input type="button" value="Add another" data-formset-add>

    <script>jQuery(function($) {
        $("#formset").formset({
            animateForms: true
        });
    });</script>

</div>

data-formset- 数据属性是

data-formset-prefix

{{ formset.prefix }} 的值。这用于找到管理表单。

data-formset-body

这表示所有子表单的位置。新表单将插入到这里。

data-formset-form

每个表单（包括空表单）都应该有此属性。

data-formset-empty-form

包含空表单模板的元素。为了获得最佳效果，请使用 <script> 标签。

data-formset-add

添加新表单的按钮。

data-formset-delete-button

删除表单的按钮。

空表单模板被包裹在一个 <script> 标签中作为纯文本。这阻止了在页面加载时任何附加到小部件上的 JavaScript 运行，并使得查找和替换 __prefix__ 占位符变得更容易。应在 <script> 内容周围使用 {% escapescript %} 块来防止内部的脚本标签过早地关闭包装脚本标签。

当点击 data-formset-add 按钮时，会在所添加的表单上触发 formAdded 事件。该事件会向上传播，因此可以从表单容器处处理。例如，为了从上面的示例中选择新添加的表单，可以绑定如下：

$('#formset').on('formAdded', function(event) {
    newForm = event.target;
    //Do Stuff
});

如果可以删除表单，并且包含删除复选框，以下操作会发生：

• 当复选框被勾选，标记表单为删除时，会在 data-formset-form 容器上触发 formDeleted 事件，并添加 data-formset-form-deleted 属性。

• 当复选框被取消勾选，将表单标记为再次激活时，会在 data-formset-form 容器上触发 formAdded 事件，并移除 data-formset-form-deleted 属性。

如果可以删除表单，并且包含删除按钮，按下删除按钮将切换该表单的删除复选框。如果使用删除按钮，应隐藏 DELETE 字段。删除按钮通过 data-formset-delete-button 属性进行识别。

{% for form in formset %}
    <div data-formset-form>
        {{ form.name }}
        {{ form.age }}

        <div class="hidden">{{ form.DELETE }}</div>
        <button type="button" data-formset-delete-button>Delete form</button>
    </div>
{% endfor %}

如果创建表单集时设置了 animateForms 选项，添加和删除表单将通过滑动表单进入和退出进行动画处理。

选项

jQuery 插件接受以下选项

表单:

用于查找表单的选择器。默认为 [data-formset-form]。

空表单:

用于查找空表单模板的选择器。默认为 script[type=form-template][data-formset-empty-form]。

主体:

用于查找表单集主体的选择器。新表单将插入此元素的底部。默认为 [data-formset-body]。

添加:

用于查找添加按钮的选择器。默认为 [data-formset-add]。

删除按钮:

用于在表单内查找删除按钮的选择器。默认为 [data-formset-delete-button]。

hasMaxFormsClass:

当达到表单的最大数量时添加到表单集的类。最大表单数量从管理表单中提取。默认为 has-max-forms。

animateForms:

是否对表单的添加/删除进行动画处理。默认为 false。