Django表单中创建新信鸽及父代记录的问题求助

针对你的需求，我们可以通过以下步骤实现搜索式父代选择和不离开当前页面创建新父代的功能，类似 Django Admin 的体验：

步骤1：配置搜索式下拉组件（使用 django-autocomplete-light） #

为了快速实现搜索选择功能，推荐使用 django-autocomplete-light 库，它能轻松集成 AJAX 搜索下拉框。

1.1 安装依赖 #

pip install django-autocomplete-light

1.2 更新 settings.py #

将以下内容添加到 INSTALLED_APPS（注意要放在 django.contrib.admin 之前）：

INSTALLED_APPS = [
    'dal',
    'dal_select2',
    # ... 其他已有的 apps
    'django.contrib.admin',
]

步骤2：创建父代搜索视图 #

为父亲（雄性）和母亲（雌性）分别创建专属的搜索视图，确保下拉框只显示对应性别的信鸽：

# views.py
from dal import autocomplete
from .models import Pigeon

class FatherAutocomplete(autocomplete.Select2QuerySetView):
    def get_queryset(self):
        # 若需登录限制，保留以下判断；公开页面可移除
        if not self.request.user.is_authenticated:
            return Pigeon.objects.none()
        
        # 只筛选雄性信鸽
        qs = Pigeon.objects.filter(gender='male')
        # 根据搜索关键词过滤名称
        if self.q:
            qs = qs.filter(name__icontains=self.q)
        return qs

class MotherAutocomplete(autocomplete.Select2QuerySetView):
    def get_queryset(self):
        if not self.request.user.is_authenticated:
            return Pigeon.objects.none()
        
        # 只筛选雌性信鸽
        qs = Pigeon.objects.filter(gender='female')
        if self.q:
            qs = qs.filter(name__icontains=self.q)
        return qs

注册搜索视图的 URL #

# urls.py
from django.urls import path
from .views import FatherAutocomplete, MotherAutocomplete, PigeonCreateView, add_pigeon

urlpatterns = [
    # ... 其他 URL
    path('register/', PigeonCreateView.as_view(), name='pigeon-register'),
    path('father-autocomplete/', FatherAutocomplete.as_view(), name='father-autocomplete'),
    path('mother-autocomplete/', MotherAutocomplete.as_view(), name='mother-autocomplete'),
    path('add-pigeon/', add_pigeon, name='add-pigeon'),
]

步骤3：更新表单组件 #

修改表单，将父代字段替换为搜索式下拉框：

# forms.py
from django import forms
from dal import autocomplete
from .models import Pigeon

class PigeonForm(forms.ModelForm):
    class Meta:
        model = Pigeon
        fields = ['name', 'gender', 'father', 'mother']
        widgets = {
            'father': autocomplete.ModelSelect2(
                url='father-autocomplete',
                attrs={
                    'data-placeholder': '搜索雄性信鸽作为父亲',
                    'class': 'form-control',
                }
            ),
            'mother': autocomplete.ModelSelect2(
                url='mother-autocomplete',
                attrs={
                    'data-placeholder': '搜索雌性信鸽作为母亲',
                    'class': 'form-control',
                }
            ),
        }

步骤4：实现 inline 创建父代功能 #

通过 Bootstrap 模态框 + AJAX 实现不离开当前页面创建新父代，并自动添加到下拉框中。

4.1 创建主表单模板（pigeon_form.html） #

{% extends 'base.html' %}

{% block content %}
<h1>信鸽注册</h1>
<form method="post" id="main-pigeon-form">
    {% csrf_token %}
    <div class="form-group">
        <label>{{ form.name.label }}</label>
        {{ form.name }}
    </div>
    <div class="form-group">
        <label>{{ form.gender.label }}</label>
        {{ form.gender }}
    </div>
    <div class="form-group">
        <label>{{ form.father.label }}</label>
        <div class="d-flex align-items-center">
            {{ form.father }}
            <button type="button" class="btn btn-sm btn-outline-primary ml-2" 
                    data-toggle="modal" data-target="#addPigeonModal" data-gender="male">
                添加父亲
            </button>
        </div>
    </div>
    <div class="form-group">
        <label>{{ form.mother.label }}</label>
        <div class="d-flex align-items-center">
            {{ form.mother }}
            <button type="button" class="btn btn-sm btn-outline-primary ml-2" 
                    data-toggle="modal" data-target="#addPigeonModal" data-gender="female">
                添加母亲
            </button>
        </div>
    </div>
    <button type="submit" class="btn btn-primary">保存信鸽</button>
</form>

<!-- 添加新信鸽的模态框 -->
<div class="modal fade" id="addPigeonModal" tabindex="-1" role="dialog" aria-labelledby="addPigeonModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addPigeonModalLabel">添加新信鸽</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="new-pigeon-form">
                    {% csrf_token %}
                    <div class="form-group">
                        <label>信鸽名称</label>
                        <input type="text" class="form-control" name="name" required>
                    </div>
                    <div class="form-group">
                        <label>性别</label>
                        <select class="form-control" name="gender" required>
                            <option value="male">雄性</option>
                            <option value="female">雌性</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="save-new-pigeon">保存</button>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// 打开模态框时自动设置性别
$('#addPigeonModal').on('show.bs.modal', function (event) {
    const button = $(event.relatedTarget);
    const gender = button.data('gender');
    $(this).find('select[name="gender"]').val(gender);
});

// AJAX 保存新信鸽
$('#save-new-pigeon').click(function() {
    const formData = $('#new-pigeon-form').serialize();
    $.ajax({
        url: "{% url 'add-pigeon' %}",
        type: 'POST',
        data: formData,
        success: function(response) {
            // 关闭模态框并重置表单
            $('#addPigeonModal').modal('hide');
            $('#new-pigeon-form')[0].reset();
            
            // 将新信鸽添加到对应下拉框并选中
            const option = $(`<option value="${response.id}" selected>${response.name}</option>`);
            if (response.gender === 'male') {
                $('#id_father').append(option);
            } else {
                $('#id_mother').append(option);
            }
        },
        error: function(xhr) {
            alert('添加失败：' + JSON.stringify(xhr.responseJSON.errors));
        }
    });
});
</script>
{% endblock %}

4.2 创建 AJAX 保存视图 #

# views.py
from django.http import JsonResponse
from django.views.decorators.http import require_POST
from .forms import PigeonForm

@require_POST
def add_pigeon(request):
    form = PigeonForm(request.POST)
    if form.is_valid():
        pigeon = form.save()
        return JsonResponse({
            'id': pigeon.id,
            'name': pigeon.name,
            'gender': pigeon.gender
        })
    return JsonResponse({'errors': form.errors}, status=400)

4.3 创建主表单的视图 #

# views.py
from django.views.generic.edit import CreateView
from .models import Pigeon
from .forms import PigeonForm

class PigeonCreateView(CreateView):
    model = Pigeon
    form_class = PigeonForm
    template_name = 'pigeon_form.html'
    success_url = '/pigeons/'  # 替换为你的成功跳转 URL

关键说明 #

1. 性别过滤：父亲和母亲的搜索视图分别只显示对应性别的信鸽，避免无效选择。
2. AJAX 无刷新创建：模态框提交后通过 AJAX 保存新信鸽，自动更新下拉框，无需刷新页面。
3. 用户体验优化：搜索下拉框支持实时输入过滤，大量信鸽时操作更高效。

内容的提问来源于stack exchange，提问作者Rafael Maura