21

这是我的做法：

{{ formset.management_form }}
<table>
    {% for form in formset.forms %}
        {{ form }}
    {% endfor %}
</table>
<a href="javascript:void(0)" id="add_form">Add Form</a>

这是JS：

var form_count = {{formset.total_form_count}};
$('#add_form').click(function() {
    form_count++;
    var form = '{{formset.empty_form|escapejs}}'.replace(/__prefix__/g, form_count);
    $('#forms').append(form)
    $('#id_form-TOTAL_FORMS').val(form_count);
});

特别困扰我的是我必须自己编写那个escapejs模板标签。它只是去除所有换行符并转义任何单引号，以免弄乱我的字符串。但是在这种情况下，Django 制造商究竟希望我们做什么呢？为什么他们有这个TOTAL_FORMS隐藏字段，而他们本可以使用一个类似的数组<input name="my_form_field[0]" />然后计算它的长度？

4

5 回答 5

7

Django 中有几个地方的“原因”是因为它是为 Django 管理应用程序实现的，我相信这就是其中之一。因此答案是他们希望您实现自己的 javascript。

请参阅此 SO 问题Dynamically added a form...了解更多 javascript 想法。

还有两个可插入的应用程序，django-dynamic-formset和django-dinamyc-form，直到现在我在查找第一个时才看到它们。

于 2010-03-01T18:56:15.233 回答
4

这个问题有点老了，但我也花了一段时间才弄清楚。

我建议在您的模板中将 formset.empty_form 呈现为隐藏字段，并在您的 javascript 中引用此字段。

这是来自 django 管理站点的一个复杂的动态表单集示例：（但请注意，它尚未更新为使用 empty_form ....）

[js] http://code.djangoproject.com/browser/django/trunk/django/contrib/admin/media/js/inlines.js

[html模板] http://code.djangoproject.com/browser/django/trunk/django/contrib/admin/templates/admin/edit_inline/tabular.html

于 2010-08-11T00:44:46.557 回答
2

这是因为 formset 已创建为无需 javascript即可工作，仅使用通常的 HTTP 工作流程。

Django 与 JavaScript 无关。

如果你想添加一些 javascript，你可以使用专用的 jquery 插件。

于 2012-01-04T19:55:08.107 回答
1

就我而言。我使用了插件 django-dynamic-formset ( https://code.google.com/p/django-dynamic-formset/wiki/Usage )

并修改了“添加”选项，效果很好。

        $('#formset-table tbody tr').formset({
            prefix: '{{ formset.prefix }}',
            formCssClass: '{{ formset.prefix }}-inlineformset',
            added: function(obj_tr){ 

                var form = $(obj_tr).html().replace(/\-(\w+)\-(\w+)(fix__)\-/g, '-');
                $(obj_tr).html(form);

           },

此正则表达式替换字符串 [prefix]-前缀peer '-'

也许不是最好的解决方案，但有效。

于 2013-10-04T12:45:26.573 回答
1

formset.empty_form当用作字符串时，有一些可能的 XSS 情况，替换'__prefix__'为实际的表单集表单索引。我的可插入应用程序转换formset.empty_form为 Knockout.js 模板，然后通过自定义 Knockout.js 绑定进行克隆。此外，Knockout.js 会自动重新计算表单字段 id 索引，当新添加的表单集表单在提交带有内联表单集的整个表单之前被动态删除时。这是文档：

https://django-jinja-knockout.readthedocs.org/en/latest/forms.html#dynamically-adding-new-related-formset-forms

在使用内联 Javascript 加载自定义字段时，Knockout.js 绑定还可以防止 XSS。

于 2016-03-18T08:06:37.403 回答