Django Admin の使いにくいManyToManyフィールドを救う！JavaScriptで超快適なSelect2ウィジェットに

2024-05-17

Django Admin の ManyToMany フィールドウィジェットを改良する方法

必要なもの

Django
Django-Admin
JavaScript ライブラリ（例：Select2、Chosen）

手順

JavaScript ライブラリを選択する

まず、使用する JavaScript ライブラリを選択する必要があります。人気のある選択肢には、Select2 と Chosen があります。どちらも、検索、フィルタリング、複数選択などの機能を提供します。

pip install django-select2

カスタムウィジェットを作成する

カスタムウィジェットを作成して、JavaScript ライブラリを統合します。例：

from django.contrib import admin
from django.forms import ModelChoiceMultiple
from select2.fields import Select2MultipleWidget

class MyManyToManyWidget(Select2MultipleWidget):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.data['model'] = self.queryset.model._meta.model_name

class MyModelAdmin(admin.ModelAdmin):
    formfield_for_manytomany = {'my_field': MyManyToManyWidget}

    # ...

カスタムウィジェットを Django Admin に登録します。例：

admin.site.register(MyModel, MyModelAdmin)

動作

このコードは、次のことを行います。

Select2 ライブラリをインストールします。
MyManyToManyWidget というカスタムウィジェットを作成します。このウィジェットは、Select2 ライブラリを使用して、ManyToMany フィールドの選択を表示します。
MyModelAdmin というカスタムModelAdmin クラスを作成します。このクラスは、formfield_for_manytomany メソッドを使用して、my_field フィールドに MyManyToManyWidget を割り当てます。

これで、Django Admin で my_field フィールドを選択すると、Select2 ウィジェットが表示されます。このウィジェットを使用すると、ユーザーは検索、フィルタリング、複数選択を行うことができます。

その他のヒント

Select2 または Chosen のドキュメントを参照して、利用可能なすべての機能を確認してください。
カスタムウィジェットをさらにカスタマイズして、ニーズに合わせることができます。
JavaScript ライブラリ以外にも、ManyToMany フィールドウィジェットを改良する方法があります。

pip install django-select2

from django.contrib import admin
from django.forms import ModelChoiceMultiple
from select2.fields import Select2MultipleWidget

class MyManyToManyWidget(Select2MultipleWidget):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.data['model'] = self.queryset.model._meta.model_name

class MyModelAdmin(admin.ModelAdmin):
    formfield_for_manytomany = {'my_field': MyManyToManyWidget}

    # ...

admin.site.register(MyModel, MyModelAdmin)

モデルの定義

from django.db import models

class MyModel(models.Model):
    # ...

    my_field = models.ManyToManyField(OtherModel)

説明

MyModel モデルを定義します。このモデルには、my_field という ManyToMany フィールドがあります。

Django Admin の ManyToMany フィールドウィジェットを改良するその他の方法

カスタムテンプレートを使用して、ManyToMany フィールドの表示をカスタマイズできます。これにより、より多くの制御と柔軟性を得ることができます。

例：

{% extends "admin/base.html" %}

{% block content %}
  <h1>{{ model_name }}</h1>

  <form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    {{ form.as_p }}

    <button type="submit">保存</button>
  </form>

  {% for field in form.visible_fields %}
    {% if field.is_hidden %}
      {% continue %}
    {% endif %}

    <div class="field-wrapper">
      <label for="{{ field.id_for_label }}">{{ field.label }}</label>
      {{ field.as_widget }}
      {% if field.errors %}
        <ul class="errorlist">
          {% for error in field.errors %}
            <li>{{ error }}</li>
          {% endfor %}
        </ul>
      {% endif %}
    </div>
  {% endfor %}
{% endblock %}

このテンプレートは、ManyToMany フィールドを select 要素ではなく、チェックボックスのリストとして表示します。

ModelAdmin クラスのメソッドをオーバーライドして、ManyToMany フィールドの表示と動作をカスタマイズできます。

from django.contrib import admin

class MyModelAdmin(admin.ModelAdmin):
    def formfield_for_manytomany(self, field, **kwargs):
        if field.name == 'my_field':
            kwargs['widget'] = CheckboxSelectMultipleWidget
        return super().formfield_for_manytomany(field, **kwargs)

    # ...