Đây là cách tôi làm, sử dụng jQuery :
Mẫu của tôi:
<h3>My Services</h3>
{{ serviceFormset.management_form }}
{% for form in serviceFormset.forms %}
<div class='table'>
<table class='no_error'>
{{ form.as_table }}
</table>
</div>
{% endfor %}
<input type="button" value="Add More" id="add_more">
<script>
$('#add_more').click(function() {
cloneMore('div.table:last', 'service');
});
</script>
Trong tệp 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);
}
Những gì nó làm:
cloneMorechấp nhận selectorlàm đối số đầu tiên và định typedạng là đối số thứ hai. Những gì selectornên làm là vượt qua nó những gì nó nên nhân đôi. Trong trường hợp này, tôi chuyển nó div.table:lastđể jQuery tìm bảng cuối cùng với một lớp table. Một :lastphần của nó rất quan trọng vì selectorcũng được sử dụng để xác định hình thức mới sẽ được chèn vào sau. Nhiều khả năng bạn muốn nó ở phần còn lại của các biểu mẫu. Đối typesố là để chúng ta có thể cập nhật management_formtrường, đáng chú ý TOTAL_FORMS, cũng như các trường mẫu thực tế. Nếu bạn có một bộ định dạng đầy đủ, giả sử, Clientcác mô hình, các trường quản lý sẽ có ID của id_clients-TOTAL_FORMSvà id_clients-INITIAL_FORMS, trong khi các trường của biểu mẫu sẽ có định dạng id_clients-N-fieldnamevớiNlà số mẫu, bắt đầu bằng 0. Vì vậy, với những typelập luận cloneMorengoại hình chức năng có bao nhiêu hình thức hiện có, và đi qua tất cả các đầu vào và nhãn bên trong hình thức mới thay thế tất cả các tên trường / id từ một cái gì đó như id_clients-(N)-nameđể id_clients-(N+1)-namevà vân vân. Sau khi hoàn thành, nó cập nhật TOTAL_FORMStrường để phản ánh biểu mẫu mới và thêm nó vào cuối tập hợp.
Chức năng này đặc biệt hữu ích với tôi vì cách thiết lập nó cho phép tôi sử dụng nó trong suốt ứng dụng khi tôi muốn cung cấp nhiều biểu mẫu hơn trong một biểu mẫu và không khiến tôi phải có một biểu mẫu "mẫu" ẩn để sao chép miễn là tôi chuyển cho nó tên tập tin định dạng và định dạng mà các biểu mẫu được đặt ra. Hy vọng nó giúp.