在模板中实现 Django admin TabularInline 表单
Implement Django admin TabularInline form in template
我想在 Django 模板中实现类似 admin TabularInline 表单的表单。 （我认为我们将需要 inlineformset_factory 用于此类表单，jquery 用于动态添加删除按钮。）
这是我的模型：
models.py
from django.db import models
class Profile(models.Model):
first_name = models.CharField(max_length=100)
last_name = models.CharField(max_length=100)
created_date = models.DateTimeField(default=timezone.now)
def get_absolute_url(self):
return reverse('profile-update', kwargs={'pk': self.pk})
def __str__(self):
return f"{self.first_name} {self.last_name}"
class FamilyMember(models.Model):
profile = models.ForeignKey(Profile, on_delete=models.CASCADE)
name = models.CharField(max_length=100)
relationship = models.CharField(max_length=100)
def __str__(self):
return self.name
如果您能在评论中指导我找到解决方案，我将不胜感激。
提前致谢。
终于知道怎么做了。这是完整的工作示例代码：（appname 是 myprofile）
Models.py
from django.db import models
from django.urls import reverse
from django.utils import timezone
class Profile(models.Model):
first_name = models.CharField(max_length=100)
last_name = models.CharField(max_length=100)
created_date = models.DateTimeField(default=timezone.now)
def get_absolute_url(self):
return reverse('profile-update', kwargs={'pk': self.pk})
def __str__(self):
return f"{self.first_name} {self.last_name}"
class FamilyMember(models.Model):
profile = models.ForeignKey(Profile, on_delete=models.CASCADE)
name = models.CharField(max_length=100)
relationship = models.CharField(max_length=100)
def __str__(self):
return self.name
forms.py
from django.forms import ModelForm, inlineformset_factory
from .models import FamilyMember, Profile
class ProfileForm(ModelForm):
class Meta:
model = Profile
exclude = ()
class FamilyMemberForm(ModelForm):
class Meta:
model = FamilyMember
exclude = ()
FamilyMemberFormSet = inlineformset_factory(
Profile, FamilyMember, form=FamilyMemberForm, extra=1)
Views.py
from django.db import transaction
from django.urls import reverse_lazy
from django.views.generic import CreateView, DeleteView, ListView, UpdateView
from .forms import FamilyMemberFormSet
from .models import Profile
class ProfileList(ListView):
model = Profile
class ProfileCreate(CreateView):
model = Profile
fields = ['first_name', 'last_name']
class ProfileFamilyMemberCreate(CreateView):
model = Profile
fields = ['first_name', 'last_name']
success_url = reverse_lazy('profile-list')
def get_context_data(self, **kwargs):
data = super(ProfileFamilyMemberCreate, self).get_context_data(**kwargs)
if self.request.POST:
data['familymembers'] = FamilyMemberFormSet(self.request.POST)
else:
data['familymembers'] = FamilyMemberFormSet()
return data
def form_valid(self, form):
context = self.get_context_data()
familymembers = context['familymembers']
with transaction.atomic():
self.object = form.save()
if familymembers.is_valid():
familymembers.instance = self.object
familymembers.save()
return super(ProfileFamilyMemberCreate, self).form_valid(form)
class ProfileUpdate(UpdateView):
model = Profile
success_url = '/'
fields = ['first_name', 'last_name']
class ProfileFamilyMemberUpdate(UpdateView):
model = Profile
fields = ['first_name', 'last_name']
success_url = reverse_lazy('profile-list')
def get_context_data(self, **kwargs):
data = super(ProfileFamilyMemberUpdate, self).get_context_data(**kwargs)
if self.request.POST:
data['familymembers'] = FamilyMemberFormSet(self.request.POST, instance=self.object)
else:
data['familymembers'] = FamilyMemberFormSet(instance=self.object)
return data
def form_valid(self, form):
context = self.get_context_data()
familymembers = context['familymembers']
with transaction.atomic():
self.object = form.save()
if familymembers.is_valid():
familymembers.instance = self.object
familymembers.save()
return super(ProfileFamilyMemberUpdate, self).form_valid(form)
class ProfileDelete(DeleteView):
model = Profile
success_url = reverse_lazy('profile-list')
urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.ProfileList.as_view(), name='profile-list'),
path('profiles/add/', views.ProfileFamilyMemberCreate.as_view(), name='profile-add'),
path('profiles/<int:pk>', views.ProfileFamilyMemberUpdate.as_view(), name='profile-update'),
path('profile/<int:pk>', views.ProfileDelete.as_view(), name='profile-delete'),
]
并且我在根目录中有以下模板：
---templates
-----myprofile
-------profile_confirm_delete.html
-------profile_form.html
-------profile_list.html
-----base.html
base.html
<html lang="en">
<head>
<title>{% block title %}My amazing site{% endblock %}</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link rel='stylesheet' href='//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext' type='text/css'>
</head>
<body>
<div id="content" class="container">
<div class="md-col-10">
{% block content %}{% endblock %}
</div>
</div>
</body>
</html>
profile_confirm_delete.html
{% extends "base.html" %}
{% block title %}{% endblock %}
{% block content %}
<h2></h2>
<hr>
<div>
<form action="" method="post">{% csrf_token %}
<p>Are you sure you want to delete "{{ object }}"?</p>
<input type="submit" value="Confirm"/>
</form>
</div>
{% endblock %}
profile_form.html
{% extends "base.html" %}
{% load static %}
{% block title %}{% endblock %}
{% block content %}
<h2>Profile</h2>
<hr>
<div class="col-md-4">
<form action="" method="post">{% csrf_token %}
{{ form.as_p }}
<table class="table">
{{ familymembers.management_form }}
{% for form in familymembers.forms %}
{% if forloop.first %}
<thead>
<tr>
{% for field in form.visible_fields %}
<th>{{ field.label|capfirst }}</th>
{% endfor %}
</tr>
</thead>
{% endif %}
<tr class="{% cycle row1 row2 %} formset_row">
{% for field in form.visible_fields %}
<td>
{# Include the hidden fields in the form #}
{% if forloop.first %}
{% for hidden in form.hidden_fields %}
{{ hidden }}
{% endfor %}
{% endif %}
{{ field.errors.as_ul }}
{{ field }}
</td>
{% endfor %}
</tr>
{% endfor %}
</table>
<input type="submit" value="Save"/> <a href="{% url 'profile-list' %}">back to the list</a>
</form>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="{% static 'formset/jquery.formset.js' %}"></script>
<script type="text/javascript">
$('.formset_row').formset({
addText: 'add family member',
deleteText: 'remove',
prefix: 'familymember_set'
});
</script>
{% endblock %}
profile_list.html
{% extends "base.html" %}
{% block title %}{% endblock %}
{% block content %}
<h2>Here are all user profiles: </h2>
<div>
<ul>
{% for profile in object_list %}
<li>{{ profile.first_name }} {{ profile.last_name }} | <a
href="{% url 'profile-update' profile.pk %}">edit</a>
<a href="{% url 'profile-delete' profile.pk %}">delete</a>
</li>
{% empty %}
<li>No profile yet.</li>
{% endfor %}
</ul>
<p>
<a href="{% url 'profile-add' %}">add a profile</a>
</p>
</div>
{% endblock %}
这里是 javascript 在 'base_path/static/formset/jquery.formset.js'
的路径中
;(function($) {
$.fn.formset = function(opts)
{
var options = $.extend({}, $.fn.formset.defaults, opts),
flatExtraClasses = options.extraClasses.join(' '),
totalForms = $('#id_' + options.prefix + '-TOTAL_FORMS'),
maxForms = $('#id_' + options.prefix + '-MAX_NUM_FORMS'),
minForms = $('#id_' + options.prefix + '-MIN_NUM_FORMS'),
childElementSelector = 'input,select,textarea,label,div',
$$ = $(this),
applyExtraClasses = function(row, ndx) {
if (options.extraClasses) {
row.removeClass(flatExtraClasses);
row.addClass(options.extraClasses[ndx % options.extraClasses.length]);
}
},
updateElementIndex = function(elem, prefix, ndx) {
var idRegex = new RegExp(prefix + '-(\d+|__prefix__)-'),
replacement = prefix + '-' + ndx + '-';
if (elem.attr("for")) elem.attr("for", elem.attr("for").replace(idRegex, replacement));
if (elem.attr('id')) elem.attr('id', elem.attr('id').replace(idRegex, replacement));
if (elem.attr('name')) elem.attr('name', elem.attr('name').replace(idRegex, replacement));
},
hasChildElements = function(row) {
return row.find(childElementSelector).length > 0;
},
showAddButton = function() {
return maxForms.length == 0 || // For Django versions pre 1.2
(maxForms.val() == '' || (maxForms.val() - totalForms.val() > 0));
},
/**
* Indicates whether delete link(s) can be displayed - when total forms > min forms
*/
showDeleteLinks = function() {
return minForms.length == 0 || // For Django versions pre 1.7
(minForms.val() == '' || (totalForms.val() - minForms.val() > 0));
},
insertDeleteLink = function(row) {
var delCssSelector = $.trim(options.deleteCssClass).replace(/\s+/g, '.'),
addCssSelector = $.trim(options.addCssClass).replace(/\s+/g, '.');
if (row.is('TR')) {
// If the forms are laid out in table rows, insert
// the remove button into the last table cell:
row.children(':last').append('<a class="' + options.deleteCssClass +'" href="javascript:void(0)">' + options.deleteText + '</a>');
} else if (row.is('UL') || row.is('OL')) {
// If they're laid out as an ordered/unordered list,
// insert an <li> after the last list item:
row.append('<li><a class="' + options.deleteCssClass + '" href="javascript:void(0)">' + options.deleteText +'</a></li>');
} else {
// Otherwise, just insert the remove button as the
// last child element of the form's container:
row.append('<a class="' + options.deleteCssClass + '" href="javascript:void(0)">' + options.deleteText +'</a>');
}
// Check if we're under the minimum number of forms - not to display delete link at rendering
if (!showDeleteLinks()){
row.find('a.' + delCssSelector).hide();
}
row.find('a.' + delCssSelector).click(function() {
var row = $(this).parents('.' + options.formCssClass),
del = row.find('input:hidden[id $= "-DELETE"]'),
buttonRow = row.siblings("a." + addCssSelector + ', .' + options.formCssClass + '-add'),
forms;
if (del.length) {
// We're dealing with an inline formset.
// Rather than remove this form from the DOM, we'll mark it as deleted
// and hide it, then let Django handle the deleting:
del.val('on');
row.hide();
forms = $('.' + options.formCssClass).not(':hidden');
} else {
row.remove();
// Update the TOTAL_FORMS count:
forms = $('.' + options.formCssClass).not('.formset-custom-template');
totalForms.val(forms.length);
}
for (var i=0, formCount=forms.length; i<formCount; i++) {
// Apply `extraClasses` to form rows so they're nicely alternating:
applyExtraClasses(forms.eq(i), i);
if (!del.length) {
// Also update names and IDs for all child controls (if this isn't
// a delete-able inline formset) so they remain in sequence:
forms.eq(i).find(childElementSelector).each(function() {
updateElementIndex($(this), options.prefix, i);
});
}
}
// Check if we've reached the minimum number of forms - hide all delete link(s)
if (!showDeleteLinks()){
$('a.' + delCssSelector).each(function(){$(this).hide();});
}
// Check if we need to show the add button:
if (buttonRow.is(':hidden') && showAddButton()) buttonRow.show();
// If a post-delete callback was provided, call it with the deleted form:
if (options.removed) options.removed(row);
return false;
});
};
$$.each(function(i) {
var row = $(this),
del = row.find('input:checkbox[id $= "-DELETE"]');
if (del.length) {
// If you specify "can_delete = True" when creating an inline formset,
// Django adds a checkbox to each form in the formset.
// Replace the default checkbox with a hidden field:
if (del.is(':checked')) {
// If an inline formset containing deleted forms fails validation, make sure
// we keep the forms hidden (thanks for the bug report and suggested fix Mike)
del.before('<input type="hidden" name="' + del.attr('name') +'" id="' + del.attr('id') +'" value="on" />');
row.hide();
} else {
del.before('<input type="hidden" name="' + del.attr('name') +'" id="' + del.attr('id') +'" />');
}
// Hide any labels associated with the DELETE checkbox:
$('label[for="' + del.attr('id') + '"]').hide();
del.remove();
}
if (hasChildElements(row)) {
row.addClass(options.formCssClass);
if (row.is(':visible')) {
insertDeleteLink(row);
applyExtraClasses(row, i);
}
}
});
if ($$.length) {
var hideAddButton = !showAddButton(),
addButton, template;
if (options.formTemplate) {
// If a form template was specified, we'll clone it to generate new form instances:
template = (options.formTemplate instanceof $) ? options.formTemplate : $(options.formTemplate);
template.removeAttr('id').addClass(options.formCssClass + ' formset-custom-template');
template.find(childElementSelector).each(function() {
updateElementIndex($(this), options.prefix, '__prefix__');
});
insertDeleteLink(template);
} else {
// Otherwise, use the last form in the formset; this works much better if you've got
// extra (>= 1) forms (thnaks to justhamade for pointing this out):
template = $('.' + options.formCssClass + ':last').clone(true).removeAttr('id');
template.find('input:hidden[id $= "-DELETE"]').remove();
// Clear all cloned fields, except those the user wants to keep (thanks to brunogola for the suggestion):
template.find(childElementSelector).not(options.keepFieldValues).each(function() {
var elem = $(this);
// If this is a checkbox or radiobutton, uncheck it.
// This fixes Issue 1, reported by Wilson.Andrew.J:
if (elem.is('input:checkbox') || elem.is('input:radio')) {
elem.attr('checked', false);
} else {
elem.val('');
}
});
}
// FIXME: Perhaps using $.data would be a better idea?
options.formTemplate = template;
if ($$.is('TR')) {
// If forms are laid out as table rows, insert the
// "add" button in a new table row:
var numCols = $$.eq(0).children().length, // This is a bit of an assumption :|
buttonRow = $('<tr><td colspan="' + numCols + '"><a class="' + options.addCssClass + '" href="javascript:void(0)">' + options.addText + '</a></tr>')
.addClass(options.formCssClass + '-add');
$$.parent().append(buttonRow);
if (hideAddButton) buttonRow.hide();
addButton = buttonRow.find('a');
} else {
// Otherwise, insert it immediately after the last form:
$$.filter(':last').after('<a class="' + options.addCssClass + '" href="javascript:void(0)">' + options.addText + '</a>');
addButton = $$.filter(':last').next();
if (hideAddButton) addButton.hide();
}
addButton.click(function() {
var formCount = parseInt(totalForms.val()),
row = options.formTemplate.clone(true).removeClass('formset-custom-template'),
buttonRow = $($(this).parents('tr.' + options.formCssClass + '-add').get(0) || this)
delCssSelector = $.trim(options.deleteCssClass).replace(/\s+/g, '.');
applyExtraClasses(row, formCount);
row.insertBefore(buttonRow).show();
row.find(childElementSelector).each(function() {
updateElementIndex($(this), options.prefix, formCount);
});
totalForms.val(formCount + 1);
// Check if we're above the minimum allowed number of forms -> show all delete link(s)
if (showDeleteLinks()){
$('a.' + delCssSelector).each(function(){$(this).show();});
}
// Check if we've exceeded the maximum allowed number of forms:
if (!showAddButton()) buttonRow.hide();
// If a post-add callback was supplied, call it with the added form:
if (options.added) options.added(row);
return false;
});
}
return $$;
};
/* Setup plugin defaults */
$.fn.formset.defaults = {
prefix: 'form', // The form prefix for your django formset
formTemplate: null, // The jQuery selection cloned to generate new form instances
addText: 'add another', // Text for the add link
deleteText: 'remove', // Text for the delete link
addCssClass: 'add-row', // CSS class applied to the add link
deleteCssClass: 'delete-row', // CSS class applied to the delete link
formCssClass: 'dynamic-form', // CSS class applied to each form in a formset
extraClasses: [], // Additional CSS classes, which will be applied to each form in turn
keepFieldValues: '', // jQuery selector for fields whose values should be kept when the form is cloned
added: null, // Function called each time a new form is added
removed: null // Function called each time a form is deleted
};
})(jQuery);
假设我们有两个模型，model_A 和 model_B，如下所示：
class model_A(models.Model):
# some fields it has
class model_B(models.Model):
fk_field = models.ForeignKey(
model_A,
verbose_name=_("model A obj"),
related_name='fk_reverse',
# this related_name is used as formsets prefix. so rember this to see where its used
on_delete=models.CASCADE)
# some fields for model B
forms.py
from django.forms import inlineformset_factory
TestFormSet = inlineformset_factory(
model_A,
model_B,
form=ModleBForm,
exclude=('some fields', ),
extra=1,
can_delete=False
)
第 1 步：像下面这样为 formset 创建模板：
formset.html
{% load static %}
{{ formset.management_form }}
{% for form in formset.forms %}
<table id="duration" class="table table-striped table-inline table-responsive">
{% if forloop.first %}
<thead>
<tr>
{% for field in form.visible_fields %}
<th> {{ field.label }} </th>
{% endfor %}
</tr>
</thead>
{% endif %}
<tbody>
<tr class="formset_row">
{% for field in form.visible_fields %}
<td>
{# Include the hidden fields in the form #}
{% if forloop.first %}
{% for hidden in form.hidden_fields %}
{{ hidden }}
{% endfor %}
{% endif %}
{{ field.errors.as_ul }}
{{ field }}
</td>
{% endfor %}
</tr>
</tbody>
</table>
{{ form.media }}
{% endfor %}
第 2 步：将包含表单集的模板
from.html
<form id="form_with_formset" action="#" method="post">
{% csrf_token %}
<table class="table">
{{ form.as_table }}
</table>
<!-- this inputs value indicates the we want to add or remove a row -->
<input id="wtd" name="wtd" type="hidden" value="1">
<div id="formset_container">
{% include 'formset.html' %}
</div>
<button type="button" class="btn btn-info" data-target-url="{{ request.path }}" id="addNewRow">add new row</button>
<button type="button" class="btn btn-warning" data-target-url="{{ request.path }}" id="remLastRow" disabled="disabled">delete last row</button>
<button type="submit" class="btn btn-success">submit</button>
</form>
#第 3 步：使用 Javascript! 的力量。
$(document).ready(function() {
// formset control
$('#addNewRow').on('click', function(e) {
e.preventDefault();
var ajax_link = this.getAttribute('data-target-url');
// +1 to indicate this a request to add new formset instance
$('#form_with_formset').find('#wtd').val(1);
$.ajax({
url: ajax_link,
data: $('#form_with_formset').serialize(),
type: 'POST',
success: function(res) {
// clear the formset container and then fill it with the-
// response of ajax call. the response contains the-
// previous formset instance plus one new instance
$('#formset_container').empty();
$('#formset_container').append(res);
}
});
$('#remLastRow').removeAttr('disabled');
});
$('#remLastRow').on('click', function(e) {
e.preventDefault();
var ajax_link = this.getAttribute('data-target-url');
// at least one formset instance is mandatory
if ($('#formset_container').children('table').length > 1) {
// -1 to indicate this a request to remove the last formset instance
$('#form_with_formset').find('#wtd').val(-1);
// because I handled fromsets in separate tables so
// for remove last instance we just remove the last child (table)
$('#formset_container table').last().remove();
$.ajax({
url: ajax_link,
data: $('#form_with_formset').serialize(),
type: 'POST',
success: function(res) {
$('#formset_container').empty();
$('#formset_container').append(res);
}
});
}
// disabling remove button if just one instance remained
if ($('#formset_container').children('table').length <= 1)
$('#remLastRow').attr('disabled', 'true');
});
});
</script>
第 4 步：urls.py
只需使用您的表单页面路径，而不是“表单路径”
urlpatterns = [
...
path('path-to-form', views.test_create, name="test_create"), # for function based views
path('path-to-form', views.TestCreate.as_view(), name="test_create"), # for class based views
...
第 5 步：views.py 处理表单和表单集的函数
**注意基于函数的视图还没有准备好，但我希望你能在这里从基于 class 的视图函数中得到一些东西，我正在处理遗漏的部分以发布 a.s.a.p.
class TestCreate(CreateView):
def get(self, request, *args, **kwargs):
context = {
'form': TestForm(), # form used to create model_A instance(s)
'formset': TestFormSet(), # formset for create model_B instace(s) linked to that model_A instace
}
return render(request, 'form.html', context)
def post(self, request, *args, **kwargs):
# if our ajax is calling so we have to take action
# because this is not the form submition
if request.is_ajax():
cp = request.POST.copy() # because we couldn't change fields values directly in request.POST
value = int(cp['wtd']) # figure out if the process is addition or deletion
prefix = "fk_reverse" # whatever your related_name is
cp[f'{prefix}-TOTAL_FORMS'] = int(
cp[f'{prefix}-TOTAL_FORMS']) + value
formset = TestFormSet(cp) # catch any data which were in the previous formsets and deliver to-
# the new formsetes again -> if the process is addition!
return render(request, 'formset.html', {'formset': formset})
form = TestForm(request.POST)
formset = TestFormSet(request.POST or None)
theres_no_error = True # a good tip, you'll see ;)
# important note: check any desired validation of formset here and it's helpful
# to prevent save model_A instance if formset contains invalid data which-
# means connected model_B instance(s) wont be created
if formset.is_valid():
for subform in formset:
if subform.cleaned_data['custom_field'] is not valid_in_your_opinion: # the formset is valid but-
# you want to check something if you'relike me crazy
theres_no_error = False
subform.full_clean()
subform.errors['custom_field'] = subform.error_class(["yor message to show error"])
if form.is_valid() and theres_no_error: # if formsets are valid too! :)
form.save()
for subform in formset:
subform.save()
我想在 Django 模板中实现类似 admin TabularInline 表单的表单。 （我认为我们将需要 inlineformset_factory 用于此类表单，jquery 用于动态添加删除按钮。）
这是我的模型：
models.py
from django.db import models
class Profile(models.Model):
first_name = models.CharField(max_length=100)
last_name = models.CharField(max_length=100)
created_date = models.DateTimeField(default=timezone.now)
def get_absolute_url(self):
return reverse('profile-update', kwargs={'pk': self.pk})
def __str__(self):
return f"{self.first_name} {self.last_name}"
class FamilyMember(models.Model):
profile = models.ForeignKey(Profile, on_delete=models.CASCADE)
name = models.CharField(max_length=100)
relationship = models.CharField(max_length=100)
def __str__(self):
return self.name
如果您能在评论中指导我找到解决方案，我将不胜感激。
提前致谢。
终于知道怎么做了。这是完整的工作示例代码：（appname 是 myprofile）
Models.py
from django.db import models
from django.urls import reverse
from django.utils import timezone
class Profile(models.Model):
first_name = models.CharField(max_length=100)
last_name = models.CharField(max_length=100)
created_date = models.DateTimeField(default=timezone.now)
def get_absolute_url(self):
return reverse('profile-update', kwargs={'pk': self.pk})
def __str__(self):
return f"{self.first_name} {self.last_name}"
class FamilyMember(models.Model):
profile = models.ForeignKey(Profile, on_delete=models.CASCADE)
name = models.CharField(max_length=100)
relationship = models.CharField(max_length=100)
def __str__(self):
return self.name
forms.py
from django.forms import ModelForm, inlineformset_factory
from .models import FamilyMember, Profile
class ProfileForm(ModelForm):
class Meta:
model = Profile
exclude = ()
class FamilyMemberForm(ModelForm):
class Meta:
model = FamilyMember
exclude = ()
FamilyMemberFormSet = inlineformset_factory(
Profile, FamilyMember, form=FamilyMemberForm, extra=1)
Views.py
from django.db import transaction
from django.urls import reverse_lazy
from django.views.generic import CreateView, DeleteView, ListView, UpdateView
from .forms import FamilyMemberFormSet
from .models import Profile
class ProfileList(ListView):
model = Profile
class ProfileCreate(CreateView):
model = Profile
fields = ['first_name', 'last_name']
class ProfileFamilyMemberCreate(CreateView):
model = Profile
fields = ['first_name', 'last_name']
success_url = reverse_lazy('profile-list')
def get_context_data(self, **kwargs):
data = super(ProfileFamilyMemberCreate, self).get_context_data(**kwargs)
if self.request.POST:
data['familymembers'] = FamilyMemberFormSet(self.request.POST)
else:
data['familymembers'] = FamilyMemberFormSet()
return data
def form_valid(self, form):
context = self.get_context_data()
familymembers = context['familymembers']
with transaction.atomic():
self.object = form.save()
if familymembers.is_valid():
familymembers.instance = self.object
familymembers.save()
return super(ProfileFamilyMemberCreate, self).form_valid(form)
class ProfileUpdate(UpdateView):
model = Profile
success_url = '/'
fields = ['first_name', 'last_name']
class ProfileFamilyMemberUpdate(UpdateView):
model = Profile
fields = ['first_name', 'last_name']
success_url = reverse_lazy('profile-list')
def get_context_data(self, **kwargs):
data = super(ProfileFamilyMemberUpdate, self).get_context_data(**kwargs)
if self.request.POST:
data['familymembers'] = FamilyMemberFormSet(self.request.POST, instance=self.object)
else:
data['familymembers'] = FamilyMemberFormSet(instance=self.object)
return data
def form_valid(self, form):
context = self.get_context_data()
familymembers = context['familymembers']
with transaction.atomic():
self.object = form.save()
if familymembers.is_valid():
familymembers.instance = self.object
familymembers.save()
return super(ProfileFamilyMemberUpdate, self).form_valid(form)
class ProfileDelete(DeleteView):
model = Profile
success_url = reverse_lazy('profile-list')
urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.ProfileList.as_view(), name='profile-list'),
path('profiles/add/', views.ProfileFamilyMemberCreate.as_view(), name='profile-add'),
path('profiles/<int:pk>', views.ProfileFamilyMemberUpdate.as_view(), name='profile-update'),
path('profile/<int:pk>', views.ProfileDelete.as_view(), name='profile-delete'),
]
并且我在根目录中有以下模板：
---templates
-----myprofile
-------profile_confirm_delete.html
-------profile_form.html
-------profile_list.html
-----base.html
base.html
<html lang="en">
<head>
<title>{% block title %}My amazing site{% endblock %}</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link rel='stylesheet' href='//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext' type='text/css'>
</head>
<body>
<div id="content" class="container">
<div class="md-col-10">
{% block content %}{% endblock %}
</div>
</div>
</body>
</html>
profile_confirm_delete.html
{% extends "base.html" %}
{% block title %}{% endblock %}
{% block content %}
<h2></h2>
<hr>
<div>
<form action="" method="post">{% csrf_token %}
<p>Are you sure you want to delete "{{ object }}"?</p>
<input type="submit" value="Confirm"/>
</form>
</div>
{% endblock %}
profile_form.html
{% extends "base.html" %}
{% load static %}
{% block title %}{% endblock %}
{% block content %}
<h2>Profile</h2>
<hr>
<div class="col-md-4">
<form action="" method="post">{% csrf_token %}
{{ form.as_p }}
<table class="table">
{{ familymembers.management_form }}
{% for form in familymembers.forms %}
{% if forloop.first %}
<thead>
<tr>
{% for field in form.visible_fields %}
<th>{{ field.label|capfirst }}</th>
{% endfor %}
</tr>
</thead>
{% endif %}
<tr class="{% cycle row1 row2 %} formset_row">
{% for field in form.visible_fields %}
<td>
{# Include the hidden fields in the form #}
{% if forloop.first %}
{% for hidden in form.hidden_fields %}
{{ hidden }}
{% endfor %}
{% endif %}
{{ field.errors.as_ul }}
{{ field }}
</td>
{% endfor %}
</tr>
{% endfor %}
</table>
<input type="submit" value="Save"/> <a href="{% url 'profile-list' %}">back to the list</a>
</form>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="{% static 'formset/jquery.formset.js' %}"></script>
<script type="text/javascript">
$('.formset_row').formset({
addText: 'add family member',
deleteText: 'remove',
prefix: 'familymember_set'
});
</script>
{% endblock %}
profile_list.html
{% extends "base.html" %}
{% block title %}{% endblock %}
{% block content %}
<h2>Here are all user profiles: </h2>
<div>
<ul>
{% for profile in object_list %}
<li>{{ profile.first_name }} {{ profile.last_name }} | <a
href="{% url 'profile-update' profile.pk %}">edit</a>
<a href="{% url 'profile-delete' profile.pk %}">delete</a>
</li>
{% empty %}
<li>No profile yet.</li>
{% endfor %}
</ul>
<p>
<a href="{% url 'profile-add' %}">add a profile</a>
</p>
</div>
{% endblock %}
这里是 javascript 在 'base_path/static/formset/jquery.formset.js'
的路径中;(function($) {
$.fn.formset = function(opts)
{
var options = $.extend({}, $.fn.formset.defaults, opts),
flatExtraClasses = options.extraClasses.join(' '),
totalForms = $('#id_' + options.prefix + '-TOTAL_FORMS'),
maxForms = $('#id_' + options.prefix + '-MAX_NUM_FORMS'),
minForms = $('#id_' + options.prefix + '-MIN_NUM_FORMS'),
childElementSelector = 'input,select,textarea,label,div',
$$ = $(this),
applyExtraClasses = function(row, ndx) {
if (options.extraClasses) {
row.removeClass(flatExtraClasses);
row.addClass(options.extraClasses[ndx % options.extraClasses.length]);
}
},
updateElementIndex = function(elem, prefix, ndx) {
var idRegex = new RegExp(prefix + '-(\d+|__prefix__)-'),
replacement = prefix + '-' + ndx + '-';
if (elem.attr("for")) elem.attr("for", elem.attr("for").replace(idRegex, replacement));
if (elem.attr('id')) elem.attr('id', elem.attr('id').replace(idRegex, replacement));
if (elem.attr('name')) elem.attr('name', elem.attr('name').replace(idRegex, replacement));
},
hasChildElements = function(row) {
return row.find(childElementSelector).length > 0;
},
showAddButton = function() {
return maxForms.length == 0 || // For Django versions pre 1.2
(maxForms.val() == '' || (maxForms.val() - totalForms.val() > 0));
},
/**
* Indicates whether delete link(s) can be displayed - when total forms > min forms
*/
showDeleteLinks = function() {
return minForms.length == 0 || // For Django versions pre 1.7
(minForms.val() == '' || (totalForms.val() - minForms.val() > 0));
},
insertDeleteLink = function(row) {
var delCssSelector = $.trim(options.deleteCssClass).replace(/\s+/g, '.'),
addCssSelector = $.trim(options.addCssClass).replace(/\s+/g, '.');
if (row.is('TR')) {
// If the forms are laid out in table rows, insert
// the remove button into the last table cell:
row.children(':last').append('<a class="' + options.deleteCssClass +'" href="javascript:void(0)">' + options.deleteText + '</a>');
} else if (row.is('UL') || row.is('OL')) {
// If they're laid out as an ordered/unordered list,
// insert an <li> after the last list item:
row.append('<li><a class="' + options.deleteCssClass + '" href="javascript:void(0)">' + options.deleteText +'</a></li>');
} else {
// Otherwise, just insert the remove button as the
// last child element of the form's container:
row.append('<a class="' + options.deleteCssClass + '" href="javascript:void(0)">' + options.deleteText +'</a>');
}
// Check if we're under the minimum number of forms - not to display delete link at rendering
if (!showDeleteLinks()){
row.find('a.' + delCssSelector).hide();
}
row.find('a.' + delCssSelector).click(function() {
var row = $(this).parents('.' + options.formCssClass),
del = row.find('input:hidden[id $= "-DELETE"]'),
buttonRow = row.siblings("a." + addCssSelector + ', .' + options.formCssClass + '-add'),
forms;
if (del.length) {
// We're dealing with an inline formset.
// Rather than remove this form from the DOM, we'll mark it as deleted
// and hide it, then let Django handle the deleting:
del.val('on');
row.hide();
forms = $('.' + options.formCssClass).not(':hidden');
} else {
row.remove();
// Update the TOTAL_FORMS count:
forms = $('.' + options.formCssClass).not('.formset-custom-template');
totalForms.val(forms.length);
}
for (var i=0, formCount=forms.length; i<formCount; i++) {
// Apply `extraClasses` to form rows so they're nicely alternating:
applyExtraClasses(forms.eq(i), i);
if (!del.length) {
// Also update names and IDs for all child controls (if this isn't
// a delete-able inline formset) so they remain in sequence:
forms.eq(i).find(childElementSelector).each(function() {
updateElementIndex($(this), options.prefix, i);
});
}
}
// Check if we've reached the minimum number of forms - hide all delete link(s)
if (!showDeleteLinks()){
$('a.' + delCssSelector).each(function(){$(this).hide();});
}
// Check if we need to show the add button:
if (buttonRow.is(':hidden') && showAddButton()) buttonRow.show();
// If a post-delete callback was provided, call it with the deleted form:
if (options.removed) options.removed(row);
return false;
});
};
$$.each(function(i) {
var row = $(this),
del = row.find('input:checkbox[id $= "-DELETE"]');
if (del.length) {
// If you specify "can_delete = True" when creating an inline formset,
// Django adds a checkbox to each form in the formset.
// Replace the default checkbox with a hidden field:
if (del.is(':checked')) {
// If an inline formset containing deleted forms fails validation, make sure
// we keep the forms hidden (thanks for the bug report and suggested fix Mike)
del.before('<input type="hidden" name="' + del.attr('name') +'" id="' + del.attr('id') +'" value="on" />');
row.hide();
} else {
del.before('<input type="hidden" name="' + del.attr('name') +'" id="' + del.attr('id') +'" />');
}
// Hide any labels associated with the DELETE checkbox:
$('label[for="' + del.attr('id') + '"]').hide();
del.remove();
}
if (hasChildElements(row)) {
row.addClass(options.formCssClass);
if (row.is(':visible')) {
insertDeleteLink(row);
applyExtraClasses(row, i);
}
}
});
if ($$.length) {
var hideAddButton = !showAddButton(),
addButton, template;
if (options.formTemplate) {
// If a form template was specified, we'll clone it to generate new form instances:
template = (options.formTemplate instanceof $) ? options.formTemplate : $(options.formTemplate);
template.removeAttr('id').addClass(options.formCssClass + ' formset-custom-template');
template.find(childElementSelector).each(function() {
updateElementIndex($(this), options.prefix, '__prefix__');
});
insertDeleteLink(template);
} else {
// Otherwise, use the last form in the formset; this works much better if you've got
// extra (>= 1) forms (thnaks to justhamade for pointing this out):
template = $('.' + options.formCssClass + ':last').clone(true).removeAttr('id');
template.find('input:hidden[id $= "-DELETE"]').remove();
// Clear all cloned fields, except those the user wants to keep (thanks to brunogola for the suggestion):
template.find(childElementSelector).not(options.keepFieldValues).each(function() {
var elem = $(this);
// If this is a checkbox or radiobutton, uncheck it.
// This fixes Issue 1, reported by Wilson.Andrew.J:
if (elem.is('input:checkbox') || elem.is('input:radio')) {
elem.attr('checked', false);
} else {
elem.val('');
}
});
}
// FIXME: Perhaps using $.data would be a better idea?
options.formTemplate = template;
if ($$.is('TR')) {
// If forms are laid out as table rows, insert the
// "add" button in a new table row:
var numCols = $$.eq(0).children().length, // This is a bit of an assumption :|
buttonRow = $('<tr><td colspan="' + numCols + '"><a class="' + options.addCssClass + '" href="javascript:void(0)">' + options.addText + '</a></tr>')
.addClass(options.formCssClass + '-add');
$$.parent().append(buttonRow);
if (hideAddButton) buttonRow.hide();
addButton = buttonRow.find('a');
} else {
// Otherwise, insert it immediately after the last form:
$$.filter(':last').after('<a class="' + options.addCssClass + '" href="javascript:void(0)">' + options.addText + '</a>');
addButton = $$.filter(':last').next();
if (hideAddButton) addButton.hide();
}
addButton.click(function() {
var formCount = parseInt(totalForms.val()),
row = options.formTemplate.clone(true).removeClass('formset-custom-template'),
buttonRow = $($(this).parents('tr.' + options.formCssClass + '-add').get(0) || this)
delCssSelector = $.trim(options.deleteCssClass).replace(/\s+/g, '.');
applyExtraClasses(row, formCount);
row.insertBefore(buttonRow).show();
row.find(childElementSelector).each(function() {
updateElementIndex($(this), options.prefix, formCount);
});
totalForms.val(formCount + 1);
// Check if we're above the minimum allowed number of forms -> show all delete link(s)
if (showDeleteLinks()){
$('a.' + delCssSelector).each(function(){$(this).show();});
}
// Check if we've exceeded the maximum allowed number of forms:
if (!showAddButton()) buttonRow.hide();
// If a post-add callback was supplied, call it with the added form:
if (options.added) options.added(row);
return false;
});
}
return $$;
};
/* Setup plugin defaults */
$.fn.formset.defaults = {
prefix: 'form', // The form prefix for your django formset
formTemplate: null, // The jQuery selection cloned to generate new form instances
addText: 'add another', // Text for the add link
deleteText: 'remove', // Text for the delete link
addCssClass: 'add-row', // CSS class applied to the add link
deleteCssClass: 'delete-row', // CSS class applied to the delete link
formCssClass: 'dynamic-form', // CSS class applied to each form in a formset
extraClasses: [], // Additional CSS classes, which will be applied to each form in turn
keepFieldValues: '', // jQuery selector for fields whose values should be kept when the form is cloned
added: null, // Function called each time a new form is added
removed: null // Function called each time a form is deleted
};
})(jQuery);
假设我们有两个模型，model_A 和 model_B，如下所示：
class model_A(models.Model):
# some fields it has
class model_B(models.Model):
fk_field = models.ForeignKey(
model_A,
verbose_name=_("model A obj"),
related_name='fk_reverse',
# this related_name is used as formsets prefix. so rember this to see where its used
on_delete=models.CASCADE)
# some fields for model B
forms.py
from django.forms import inlineformset_factory
TestFormSet = inlineformset_factory(
model_A,
model_B,
form=ModleBForm,
exclude=('some fields', ),
extra=1,
can_delete=False
)
第 1 步：像下面这样为 formset 创建模板：
formset.html
{% load static %}
{{ formset.management_form }}
{% for form in formset.forms %}
<table id="duration" class="table table-striped table-inline table-responsive">
{% if forloop.first %}
<thead>
<tr>
{% for field in form.visible_fields %}
<th> {{ field.label }} </th>
{% endfor %}
</tr>
</thead>
{% endif %}
<tbody>
<tr class="formset_row">
{% for field in form.visible_fields %}
<td>
{# Include the hidden fields in the form #}
{% if forloop.first %}
{% for hidden in form.hidden_fields %}
{{ hidden }}
{% endfor %}
{% endif %}
{{ field.errors.as_ul }}
{{ field }}
</td>
{% endfor %}
</tr>
</tbody>
</table>
{{ form.media }}
{% endfor %}
第 2 步：将包含表单集的模板
from.html
<form id="form_with_formset" action="#" method="post">
{% csrf_token %}
<table class="table">
{{ form.as_table }}
</table>
<!-- this inputs value indicates the we want to add or remove a row -->
<input id="wtd" name="wtd" type="hidden" value="1">
<div id="formset_container">
{% include 'formset.html' %}
</div>
<button type="button" class="btn btn-info" data-target-url="{{ request.path }}" id="addNewRow">add new row</button>
<button type="button" class="btn btn-warning" data-target-url="{{ request.path }}" id="remLastRow" disabled="disabled">delete last row</button>
<button type="submit" class="btn btn-success">submit</button>
</form>
#第 3 步：使用 Javascript! 的力量。
$(document).ready(function() {
// formset control
$('#addNewRow').on('click', function(e) {
e.preventDefault();
var ajax_link = this.getAttribute('data-target-url');
// +1 to indicate this a request to add new formset instance
$('#form_with_formset').find('#wtd').val(1);
$.ajax({
url: ajax_link,
data: $('#form_with_formset').serialize(),
type: 'POST',
success: function(res) {
// clear the formset container and then fill it with the-
// response of ajax call. the response contains the-
// previous formset instance plus one new instance
$('#formset_container').empty();
$('#formset_container').append(res);
}
});
$('#remLastRow').removeAttr('disabled');
});
$('#remLastRow').on('click', function(e) {
e.preventDefault();
var ajax_link = this.getAttribute('data-target-url');
// at least one formset instance is mandatory
if ($('#formset_container').children('table').length > 1) {
// -1 to indicate this a request to remove the last formset instance
$('#form_with_formset').find('#wtd').val(-1);
// because I handled fromsets in separate tables so
// for remove last instance we just remove the last child (table)
$('#formset_container table').last().remove();
$.ajax({
url: ajax_link,
data: $('#form_with_formset').serialize(),
type: 'POST',
success: function(res) {
$('#formset_container').empty();
$('#formset_container').append(res);
}
});
}
// disabling remove button if just one instance remained
if ($('#formset_container').children('table').length <= 1)
$('#remLastRow').attr('disabled', 'true');
});
});
</script>
第 4 步：urls.py
只需使用您的表单页面路径，而不是“表单路径”
urlpatterns = [
...
path('path-to-form', views.test_create, name="test_create"), # for function based views
path('path-to-form', views.TestCreate.as_view(), name="test_create"), # for class based views
...
第 5 步：views.py 处理表单和表单集的函数
**注意基于函数的视图还没有准备好，但我希望你能在这里从基于 class 的视图函数中得到一些东西，我正在处理遗漏的部分以发布 a.s.a.p.
class TestCreate(CreateView):
def get(self, request, *args, **kwargs):
context = {
'form': TestForm(), # form used to create model_A instance(s)
'formset': TestFormSet(), # formset for create model_B instace(s) linked to that model_A instace
}
return render(request, 'form.html', context)
def post(self, request, *args, **kwargs):
# if our ajax is calling so we have to take action
# because this is not the form submition
if request.is_ajax():
cp = request.POST.copy() # because we couldn't change fields values directly in request.POST
value = int(cp['wtd']) # figure out if the process is addition or deletion
prefix = "fk_reverse" # whatever your related_name is
cp[f'{prefix}-TOTAL_FORMS'] = int(
cp[f'{prefix}-TOTAL_FORMS']) + value
formset = TestFormSet(cp) # catch any data which were in the previous formsets and deliver to-
# the new formsetes again -> if the process is addition!
return render(request, 'formset.html', {'formset': formset})
form = TestForm(request.POST)
formset = TestFormSet(request.POST or None)
theres_no_error = True # a good tip, you'll see ;)
# important note: check any desired validation of formset here and it's helpful
# to prevent save model_A instance if formset contains invalid data which-
# means connected model_B instance(s) wont be created
if formset.is_valid():
for subform in formset:
if subform.cleaned_data['custom_field'] is not valid_in_your_opinion: # the formset is valid but-
# you want to check something if you'relike me crazy
theres_no_error = False
subform.full_clean()
subform.errors['custom_field'] = subform.error_class(["yor message to show error"])
if form.is_valid() and theres_no_error: # if formsets are valid too! :)
form.save()
for subform in formset:
subform.save()