如何在 Django 中创建动态表单集?
这是我的做法:
{{ 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
隐藏字段,而他们可以只使用 这样的数组,然后进行计数它的长度呢?
Here's the way I'm doing it:
{{ formset.management_form }}
<table>
{% for form in formset.forms %}
{{ form }}
{% endfor %}
</table>
<a href="javascript:void(0)" id="add_form">Add Form</a>
And here's the 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);
});
What specifically bothers me is that I had to write that escapejs
template tag myself. It just strips all newlines and escapes any single quotes so that it doesn't mess up my string. But what exactly did the Django makers expect us to do in this situation? And why do they have this TOTAL_FORMS
hidden field, when they could have just used an array like <input name="my_form_field[0]" />
and then counted its length instead?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
Django 中有几个地方“原因”是因为 Django 管理应用程序是这样实现的,我相信这就是其中之一。因此答案是他们希望你实现你自己的 javascript。
请参阅这个SO问题 动态添加表单...< /a> 了解更多 javascript 想法。
还有两个可插入应用程序可用,django-dynamic-formset 和 < a href="http://github.com/javisantana/django-dinamyc-form" rel="nofollow noreferrer">django-dinamyc-form 直到刚才查找第一个时我才看到一。
There are a few places in Django where "the reason why" is because that's how it was implemented for the Django admin app, and I believe this is one of them. Thus the answer is they expect you to implement your own javascript.
See this SO question Dynamically adding a form... for some more javascript ideas.
There are also two pluggable apps available, django-dynamic-formset and django-dinamyc-form which I hadn't seen until just now when looking up the first one.
这个问题有点老了,但我也花了一段时间才弄清楚。
我建议在模板中将 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
This question is a bit old, but it took me a while to figure this out as well.
I suggest rendering formset.empty_form in your template as a hidden field, and referencing this field in your javascript.
Here's a complicated dynamic formset example from the django admin site:
(but note that it has not been updated to use empty_form....)
[js]
http://code.djangoproject.com/browser/django/trunk/django/contrib/admin/media/js/inlines.js
[html template]
http://code.djangoproject.com/browser/django/trunk/django/contrib/admin/templates/admin/edit_inline/tabular.html
这是因为表单集被创建为无需 JavaScript,仅使用通常的 HTTP 工作流程。
Django 与 JavaScript 无关。
如果你想添加一些 JavaScript,你可以使用 专用 jquery 插件。
It's because formset have been created to work without javascript, using only the usual HTTP workflow.
Django is javascript agnostic.
If you want to add some javascript to the mix, you can use the dedicated jquery plugin.
就我而言。我使用了插件 django-dynamic-formset (https://code.google .com/p/django-dynamic-formset/wiki/Usage)
并修改了“添加”选项并且效果良好。
这个正则表达式替换字符串 [prefix]-prefix Peer '-'
也许不是最好的解决方案,但有效。
in my case. i used the plugin django-dynamic-formset (https://code.google.com/p/django-dynamic-formset/wiki/Usage)
and modified the option "added" and worked good.
this regular expression replace the string [prefix]-prefix peer '-'
maybe isn't the best solution, but worked.
使用
formset.empty_form
作为字符串,将'__prefix__'
替换为实际的表单集表单索引时,在某些情况下可能会出现 XSS。我的可插入应用程序将formset.empty_form
转换为 Knockout.js 模板,然后通过自定义 Knockout.js 绑定进行克隆。此外,当在提交带有内联表单集的整个表单之前动态删除新添加的表单集表单时,Knockout.js 会自动重新计算表单字段 id 索引。这是文档:https://django-jinja-knockout.readthedocs.org/en/latest/forms.html#dynamically-adding-new-lated-formset-forms
Knockout.js 绑定还可以在加载内联自定义字段时防止 XSS JavaScript。
There are some cases of possible XSS when using
formset.empty_form
as a string, replacing'__prefix__'
to actual formset form index. My pluggable application convertsformset.empty_form
into Knockout.js template which is then cloned via custom Knockout.js bindings. Also Knockout.js automatically re-calculates form field id indexes, when newly added formset form is dynamically deleted before the whole form with inlineformsets was submitted. Here is the documentation:https://django-jinja-knockout.readthedocs.org/en/latest/forms.html#dynamically-adding-new-related-formset-forms
Knockout.js binding also prevents XSS when loading custom fields with inline Javascript.