我就是这样做的,用jQuery:
我的模板:
My Services
{{ serviceFormset.management_form }}{% for form in serviceFormset.forms %}
{{ form.as_table }}
$('#add_more').click(function() {
cloneMore('div.table:last', 'service');
});
在javascript文件中:function cloneMore(selector, type) {
var newElement = $(selector).clone(true);
var total = $('#id_' + type + '-TOTAL_FORMS').val();
newElement.find(':input').each(function() {
var name = $(this).attr('name').replace('-' + (total-1) + '-','-' + total + '-');
var id = 'id_' + name;
$(this).attr({'name': name, 'id': id}).val('').removeAttr('checked');
});
newElement.find('label').each(function() {
var newFor = $(this).attr('for').replace('-' + (total-1) + '-','-' + total + '-');
$(this).attr('for', newFor);
});
total++;
$('#id_' + type + '-TOTAL_FORMS').val(total);
$(selector).after(newElement);}
它所做的:
cloneMore接受selector作为第一个论点,type作为第二种形式。这是什么selector应该做的是传递它应该复制的东西。在这种情况下,我通过它div.table:last类的jQuery查找最后一个表。table..这个:last其中的一部分很重要,因为selector也用于确定在后面插入什么新窗体。更有可能的是,你会希望它在其他表格的末尾。这个type参数,以便我们可以更新management_form字段,特别是TOTAL_FORMS,以及实际的表单字段。如果你有一套表格,比如说,Client模型,管理字段将具有id_clients-TOTAL_FORMS和id_clients-INITIAL_FORMS,而窗体字段的格式为id_clients-N-fieldname带着N作为表单编号,从0..所以说type争论cloneMore函数查看当前有多少个窗体,并遍历新表单中的每个输入和标签,替换来自以下内容的所有字段名/IDid_clients-(N)-name到id_clients-(N+1)-name诸若此类。完成后,它将更新TOTAL_FORMS字段以反映新窗体并将其添加到集合的末尾。
这个函数对我特别有帮助,因为它的设置方式允许我在整个应用程序中使用它,当我想要在一个窗体集中提供更多的表单时,并且不需要有一个隐藏的“模板”表单来复制,只要我把表单的名称和表单布局的格式传递给它。希望能帮上忙。