如何在Django中为含多选项的M2M关系打造直观表单字段？

一、普通多对多关系（模型A&模型B）：实现已选项置顶的滚动选择器 #

针对CheckboxSelectMultiple在大量选项下的体验问题，你可以自定义Widget实现已选项置顶+滚动容器的效果：

1. 自定义Widget类 #

from django.forms.widgets import CheckboxSelectMultiple
from django.utils.html import format_html_join

class OrderedCheckboxSelectMultiple(CheckboxSelectMultiple):
    def render(self, name, value, attrs=None, renderer=None):
        value = value or []
        # 拆分选中与未选中选项
        selected_options = []
        unselected_options = []
        for option_value, option_label in self.choices:
            if str(option_value) in value:
                selected_options.append((option_value, option_label))
            else:
                unselected_options.append((option_value, option_label))
        
        # 渲染选中项（置顶）
        selected_html = format_html_join(
            '\n',
            '<li><label><input type="checkbox" name="{}" value="{}" checked> {}</label></li>',
            ((name, val, label) for val, label in selected_options)
        )
        # 渲染未选中项
        unselected_html = format_html_join(
            '\n',
            '<li><label><input type="checkbox" name="{}" value="{}"> {}</label></li>',
            ((name, val, label) for val, label in unselected_options)
        )
        
        # 包裹滚动容器
        return format_html(
            '<ul style="max-height: 400px; overflow-y: auto; list-style: none; padding: 0;">{}{}</ul>',
            selected_html,
            unselected_html
        )

2. 在表单中使用该Widget #

from django import forms
from .models import ModelA

class ModelAForm(forms.ModelForm):
    class Meta:
        model = ModelA
        fields = ['name', 'model_b_instances']
        widgets = {
            'model_b_instances': OrderedCheckboxSelectMultiple(),
        }

渲染后的组件会将已选的ModelB实例置于顶部，容器固定高度，超出内容可滚动。

二、带中间表的有序多对多关系（模型C&模型D）：支持排序输入的组件 #

对于通过中间表维护顺序的M2M关系，需要自定义字段和Widget来支持排序输入：

1. 假设中间表结构 #

from django.db import models

class ModelC(models.Model):
    name = models.CharField(max_length=100)
    model_d_instances = models.ManyToManyField(
        'ModelD',
        through='CToD',
        related_name='model_c_instances'
    )

class ModelD(models.Model):
    name = models.CharField(max_length=100)

class CToD(models.Model):
    model_c = models.ForeignKey(ModelC, on_delete=models.CASCADE)
    model_d = models.ForeignKey(ModelD, on_delete=models.CASCADE)
    order = models.IntegerField(default=0)

    class Meta:
        ordering = ['order']

2. 自定义Widget和表单字段 #

from django.forms import ModelMultipleChoiceField, Widget

class OrderedM2MWithSortWidget(Widget):
    template_name = 'ordered_m2m_widget.html'

    def get_context(self, name, value, attrs):
        context = super().get_context(name, value, attrs)
        # 获取已选中的ModelD实例及其对应order
        selected_instances = []
        if value:
            from .models import CToD
            for d_id in value:
                c_to_d = CToD.objects.filter(model_d_id=d_id, model_c_id=self.attrs.get('model_c_id')).first()
                order = c_to_d.order if c_to_d else 0
                d_instance = ModelD.objects.get(id=d_id)
                selected_instances.append({
                    'id': d_id,
                    'name': d_instance.name,
                    'order': order
                })
        # 未选中的实例
        unselected_instances = ModelD.objects.exclude(id__in=value or [])
        context.update({
            'selected_instances': selected_instances,
            'unselected_instances': unselected_instances,
            'name': name
        })
        return context

class OrderedM2MWithSortField(ModelMultipleChoiceField):
    widget = OrderedM2MWithSortWidget

    def clean(self, value):
        cleaned_data = super().clean(value)
        return cleaned_data

3. 编写模板ordered_m2m_widget.html #

<div style="display: flex; gap: 20px;">
    <div style="max-height: 400px; overflow-y: auto; flex: 1;">
        <h4>已选（可设置顺序）</h4>
        {% for instance in selected_instances %}
        <div style="margin: 8px 0;">
            <input type="hidden" name="{{ name }}" value="{{ instance.id }}" checked>
            <label>{{ instance.name }}</label>
            <input type="number" name="{{ name }}_order_{{ instance.id }}" value="{{ instance.order }}" min="0" style="width: 60px; margin-left: 10px;">
        </div>
        {% endfor %}
    </div>
    <div style="max-height: 400px; overflow-y: auto; flex: 1;">
        <h4>可选</h4>
        {% for instance in unselected_instances %}
        <div style="margin: 8px 0;">
            <label>
                <input type="checkbox" name="{{ name }}" value="{{ instance.id }}">
                {{ instance.name }}
            </label>
        </div>
        {% endfor %}
    </div>
</div>

4. 在表单中使用并处理排序保存 #

class ModelCForm(forms.ModelForm):
    model_d_instances = OrderedM2MWithSortField(queryset=ModelD.objects.all())

    class Meta:
        model = ModelC
        fields = ['name', 'model_d_instances']

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        # 传递当前ModelC实例ID给Widget，用于获取中间表的order
        if self.instance.pk:
            self.fields['model_d_instances'].widget.attrs['model_c_id'] = self.instance.pk

    def save(self, commit=True):
        instance = super().save(commit=False)
        if commit:
            instance.save()
            # 处理排序更新
            for d_id in self.cleaned_data['model_d_instances']:
                order = self.data.get(f'model_d_instances_order_{d_id}', 0)
                CToD.objects.update_or_create(
                    model_c=instance,
                    model_d_id=d_id,
                    defaults={'order': int(order)}
                )
            # 删除不再关联的中间表记录
            CToD.objects.filter(model_c=instance).exclude(model_d_id__in=[d.id for d in self.cleaned_data['model_d_instances']]).delete()
        return instance

三、更高效的替代方案 #

如果选项数量极大（数百个），自定义Widget仍可能存在性能问题，推荐以下方案：

• 搜索式自动完成组件：用django-autocomplete-light实现远程搜索选择，仅加载用户搜索匹配的选项，避免一次性渲染大量选项。
• 拖拽排序组件：结合前端拖拽库（如jQuery UI Sortable），将已选实例做成可拖拽排序的列表，拖拽后自动更新隐藏的order输入框值，比手动输入序号更直观。

内容的提问来源于stack exchange，提问作者Julian George