Django | 在同一個模板上多次使用同一個表單

Question

我有一個名為“List”的 model 和一個名為“ListItem”的 model 的項目。 每個列表有多個列表項。 這就是我想做的。 我希望用戶能夠在一個表單上創建一個包含他們認為需要的盡可能多的項目的新列表。

這是我到目前為止的邏輯：

模型.py：

class List(models.Model):
    team = models.ForeignKey(Team, on_delete=models.CASCADE)
    name = models.CharField(max_length=50)

    def __str__(self):
        return self.name


class ListItem(models.Model):
    team_list = models.ForeignKey(List, on_delete=models.CASCADE)
    content = models.TextField()
    index = models.IntegerField()

    def __str__(self):
        return f"{self.team_list} [{self.index}]"

forms.py：

class NewListForm(forms.ModelForm):
    name = forms.CharField(max_length=50, label='Card Name')
    team = forms.ModelChoiceField(queryset=models.Team.objects.all())

    class Meta:
        model = models.List
        fields = ['name', 'team']


class NewListItemForm(forms.ModelForm):
    content = forms.CharField(widget=forms.Textarea,
                              label='Item', required=True)

    class Meta:
        model = models.ListItem
        fields = ['content']

視圖.py：

def new_list(request):
    context = {
        'title': 'New List',
        'list_form': NewListForm,
        'list_item_form': NewListItemForm,
    }
    if request.method == 'POST':
        list_form = NewListForm(request.POST)
        list_item_form = NewListItemForm(request.POST)
        if list_form.is_valid() and list_item_form.is_valid():
            list_instance = list_form.save()
            list_item_instance = list_item_form.save(commit=False)
            list_item_instance.team_list = list_instance
            list_item_instance.index = 1
            list_item_instance.save()
            messages.success(request, "List has been created!")
            return redirect('home')
        else:
            messages.error(request, "That list name is already taken")
    return render(request, 'lists/new_list.html', context)

這適用於創建 1 個列表和 1 個項目。 最終，我希望用戶能夠根據需要添加盡可能多的附加列表項 forms 並且使該列表中每個項目的“索引”字段隨着每個新的列表項實例增加 1。

是否有某種方法可以遍歷重復表單的每個實例並將唯一實例無限次地保存在我的數據庫中？

Answer 1

我認為您不需要自己增加索引，django 應該自動增加它。 我在模板上使用formset_factory和 javascript 以便能夠動態地向表單添加字段。 我對 django 或 javascript 不是很熟悉（我在學習過程中很早），但這就是我如何讓它在我的情況下工作：

模型.py

class Instructors(models.Model):
    instructors = models.CharField(max_length=60)
    injury = models.ForeignKey("Injury", on_delete=models.CASCADE)

forms.py

class InstructorForm(forms.Form):
    instructor = forms.CharField(max_length=60, required=False)


InstructorFormset = formset_factory(InstructorForm, extra=1)

views.py （相關部分）

...
formset = InstructorFormset(request.POST)
if formset.is_valid()
    for form in formset:
        if form.cleaned_data:
            instructor = Instructors(
                instructors=form.cleaned_data["instructor"],
                injury=injury,
            )
            instructor.save()
...
context = {"formset":formset}

模板.html

{{ formset.management_form }}
    {% for form in formset %}
    <div class="row form-row spacer">
        {{ form.instructor }}
        <div class="input-group-append">
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type='text/javascript'>
function updateElementIndex(el, prefix, ndx) {
    var id_regex = new RegExp('(' + prefix + '-\\d+)');
    var replacement = prefix + '-' + ndx;
    if ($(el).attr("for")) $(el).attr("for", $(el).attr("for").replace(id_regex, replacement));
    if (el.id) el.id = el.id.replace(id_regex, replacement);
    if (el.name) el.name = el.name.replace(id_regex, replacement);
}
function cloneMore(selector, prefix) {
    var newElement = $(selector).clone(true);
    console.log(newElement);
    var total = $('#id_' + prefix + '-TOTAL_FORMS').val();
    newElement.find(':input:not([type=button]):not([type=submit]):not([type=reset])').each(function() {
        var name = $(this).attr('name');
        if (name != undefined) {
            console.log(name);
            console.log(total);
            var name = name.replace('-' + (total-1) + '-', '-' + total + '-');
            console.log("next");
        };
        var id = 'id_' + name;
        $(this).attr({'name': name, 'id': id}).val('').removeAttr('checked');
    });
    newElement.find('label').each(function() {
        var forValue = $(this).attr('for');
        if (forValue) {
          forValue = forValue.replace('-' + (total-1) + '-', '-' + total + '-');
          $(this).attr({'for': forValue});
        }
    });
    total++;
    $('#id_' + prefix + '-TOTAL_FORMS').val(total);
    $(selector).after(newElement);
    var conditionRow = $('.form-row:not(:last)');
    conditionRow.find('.btn.add-form-row')
    .removeClass('btn-success').addClass('btn-danger')
    .removeClass('add-form-row').addClass('remove-form-row')
    .html('-');
    return false;
}
function deleteForm(prefix, btn) {
    var total = parseInt($('#id_' + prefix + '-TOTAL_FORMS').val());
    if (total > 1){
        btn.closest('.form-row').remove();
        var forms = $('.form-row');
        $('#id_' + prefix + '-TOTAL_FORMS').val(forms.length);
        for (var i=0, formCount=forms.length; i<formCount; i++) {
            $(forms.get(i)).find(':input').each(function() {
                updateElementIndex(this, prefix, i);
            });
        }
    }
    return false;
}
$(document).on('click', '.add-form-row', function(e){
    e.preventDefault();
    cloneMore('.form-row:last', 'form');
    return false;
});
$(document).on('click', '.remove-form-row', function(e){
    e.preventDefault();
    deleteForm('form', $(this));
    return false;
});
</script>

我不記得我從哪里得到的 js 代碼，但我沒有寫它，也不能歸功於它。 希望你比我有更好的理解，但它對我有用。