django-dynamic-formset 在错误的位置显示“添加”和“删除”按钮

Question

我的应用程序昨天运行良好。 在我开始在浏览器中使用 .css 属性后，突然 django-dynamic-formset 脚本不再正常工作。 它为表单中的每个输入而不是每一行显示“添加”和“删除”按钮。 请看附上的照片。

{% load crispy_forms_tags %}
{% load staticfiles %}
{% load static %}

<table>
{{ formset.management_form|crispy }}

    {% for form in formset.forms %}
            <tr class="{% cycle 'row1' 'row2' %} 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>

    {% endfor %}

</table>

<!-- <p class='btn btn-warning' id='agregar'>Agregar Posición</p> -->
<br>
<script type="text/javascript" src="{% static 'admin/js/vendor/jquery/jquery.js' %}"></script>
{{formset.media}}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="{% static 'dynamic_formsets/jquery.formset.js' %}"></script>
<script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/admin/js/vendor/jquery/jquery.js"></script>
<!-- <script type="text/javascript">
  $('#agregar').on('click',function(){
    $('.formset-test').append()
  });
</script> -->

<script type="text/javascript">
    $('.formset_row-{{ formset.prefix }}').formset({
        addText: 'Agregar posición',
        deleteText: 'Borrar posición',
        prefix: '{{ formset.prefix }}',
    });
</script>`

此外，它不尊重我给出的重命名（参见代码末尾的脚本）。 代替“Agregar Posicion”文本，显示默认的“添加另一个”。

Answer 1

您遇到了一些不同的问题：

首先，您在 jQuery object 上直接调用.formset function。 根据文档，它需要包装在“准备就绪”的 function 中，例如：

<script type="text/javascript">
$(function() {
    $('.formset_row-{{ formset.prefix }}').formset({
        addText: 'Agregar posición',
        deleteText: 'Borrar posición',
        prefix: '{{ formset.prefix }}',
    });
})
</script>

这应该可以解决未使用自定义参数的问题，因为它们没有传递给.formset function。

至于将标签添加到每个输入，您没有提供您的 views.py 或 forms.py 文件来了解您实际传递给模板的内容，但根据我使用 django-dynamic-formset 插件的经验，它是小气。 我发现，如果您在 forms 中使用 div，则使用 class 名称选择器效果最好，但是使用表格的文档中的示例最适合表格。 如果您为您的表格分配一个“id”，然后添加一个 tbody 标签，您可以将代码更改为：

<script type="text/javascript">
$(function() {
    $('#your-table-id tbody tr').formset({
        addText: 'Agregar posición',
        deleteText: 'Borrar posición',
        prefix: '{{ formset.prefix }}',
    });
})
</script>

另外，没有看到您的 views.py 文件，但我不确定您为什么使用

{% for form in formset.forms %}

您应该只是将表单集从您的视图传递到您的模板并将其引用为

{% for form in formset %}