如何将动态表单添加到模板中的 django 表单集,而无需烦人的 html 模板输出副本?
我有一个结果表单数量未知的表单集,我需要通过按一个按钮直接在模板中添加一些表单。
最佳答案
这个 self 回答是基于this post由 Nick Lang 编写,但我们将以这种方式进行简化,我们不再需要复制/粘贴整个表单 html。
我们有一个内联表单集,它是在这样的 View 中创建的:
items_formset = inlineformset_factory(Parent, Item, form=ItemForm, extra=1)
item_forms = items_formset()
接下来,我们需要为 formset 表单创建一个模板,我们可以使用 formset 实例的 empty_form
属性来完成它,它会生成一个 html 表单模板,其中表单的每个“id”编号是替换为 __prefix__
字符串,例如:
<!--
{{ item_forms.empty_form }}
{# <!-- or for crispy forms --> {% crispy item_forms.empty_form item_forms.form.helper %} #}
-->
因此,首先我们需要用一个 id 替换这个 __prefix__
并使用这个模板添加一个表单。
这是一个表单模板代码片段,我们可以使用它来创建新元素:
<script type="text/html" id="item-template">
<div id="item-__prefix__">
{{ item_forms.empty_form }}
<!-- crispy: {% crispy item_forms.empty_form item_forms.form.helper %} -->
</div>
</script>
然后我们需要显示表单的主要部分:
<form action="" method="post">
{% csrf_token %}
{{ item_forms.management_form }}
<div id="items-form-container">
{% for item_form in item_forms %}
<div id="item-{{ forloop.counter0 }}">
{{ item_form.id }}
{{ item_form.as_p }}
{# <!-- or for crispy forms --> {% crispy item_form %} #}
</div>
{% endfor %}
</div>
<a href="#" id="add-item-button" class="btn btn-info add-item">Add Item</a>
</form>
最后我们需要添加一些 JS(jquery,使用 1.9.1 和 2.1.0 测试过)来添加下一个 formset 表单。请注意,我们不会使用 underscore.js
,因为在这种情况下不需要它:只需 str.replace 将 __prefix__
替换为下一个“id”编号)
<script>
$(document).ready(function() {
$('.add-item').click(function(ev) {
ev.preventDefault();
var count = $('#items-form-container').children().length;
var tmplMarkup = $('#item-template').html();
var compiledTmpl = tmplMarkup.replace(/__prefix__/g, count);
$('div#items-form-container').append(compiledTmpl);
// update form count
$('#id_item_items-TOTAL_FORMS').attr('value', count+1);
// some animate to scroll to view our new form
$('html, body').animate({
scrollTop: $("#add-item-button").position().top-200
}, 800);
});
});
</script>
就是这样,只需单击“添加项目”按钮,就会出现一个新的表单集项目。
请务必将此示例替换为您的应用名称/模型名称。
关于javascript - 以正确的方式使用javascript将动态表单添加到django formset,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21260987/