Как сделать по аналогии с админкой в Django?

Question

[coalesce]

Хочу сделать форму как в админке:
Выбирать несколько объектов одной модели для поля ManyToManyField другой модели.


Например, у меня есть 2 модели: сотрудники и команды. Команда состоит из сотрудников. Сотрудник может состоять в нескольких командах.
models.py

class Employee(models.Model):
    last = models.CharField...

class Team(models.Model):
    employees = models.ManyToManyField(Employee)

Если использовать стандартную форму

class TeamForm(forms.ModelForm):
    class Meta:
        model = Team

То инетфейс получается неудобным.

Создаётся обычный select с multiple

Вопрос. Есть ли какая-то базовая админская форма от которой можно наследоваться или виджет чтобы минимальными усилиями получить интерфейс как в админке (на первом скриншоте)?

Answer 1

[Сергей Горностаев]

from django.contrib.admin.widgets import FilteredSelectMultiple

class TeamForm(forms.ModelForm):
    class Meta:
        model = Team
        fields = ('employees',)
        widgets = {
            'employees': FilteredSelectMultiple(u'Сотрудники', False),
        }
    class Media:
        css = {
            'all': ['admin/css/widgets.css'],
        }
        js = ['/admin/jsi18n/']

Comments

[coalesce]

Подскажите почему не подгружаются Media?

views.py

form = TeamForm(request.POST or None)
print(form.media)
return render(request, 'template.html', locals())

выводит

<link href="/static/admin/css/widgets.css" type="text/css" media="all" rel="stylesheet" />
<script type="text/javascript" src="/static/admin/js/core.js"></script>
<script type="text/javascript" src="/static/admin/js/SelectBox.js"></script>
<script type="text/javascript" src="/static/admin/js/SelectFilter2.js"></script>
<script type="text/javascript" src="/admin/jsi18n/"></script>

Однако если смотреть в браузере через "исходный код страницы" то js библиотек нет.

в шаблоне вывожу так:

{% block form %}
    {{ form }}
{% endblock %}

Если добавить в шаблон
{{ form.media }}
то в "исходном коде странице" css и js появляются, однако виджет "не отрабатывает".
хотя select обновился: добавился класс selectfilter и атрибуты data-field-name и data-is-stacked

<select name="employees" required="" id="id_employees" multiple="multiple" class="selectfilter" data-field-name="verbose name" data-is-stacked="0">
  <option value="1">...</option>
</select>

До указания forms.ModelMultipleChoiceField было так:

<select name="employees" required="" id="id_employees" multiple="multiple">
  <option value="1">...</option>
</select>

Т.е. получается как будто js не подхватывает этот select и соответственно не обрабатывает его.

Так... в консоли есть js-ошибки


Подключил дополнительно
admin/js/jquery.init.js
и заработало

[Сергей Горностаев]

coalesce,

{{ form.media }}
<form>
    {{ form }}
</form>

[Сергей Горностаев]

coalesce, в код страницы до подключения прикладных скриптов, но после подключения jQuery добавьте

<script>
var django = django || {};
django.jQuery = jQuery;
</script>

[coalesce]

Сергей Горностаев, спасибо!

Чтобы сохранить работу сторонних библиотек добавил строку:
$ = django.jQuery

<script>
var django = django || {};
django.jQuery = jQuery;
$ = django.jQuery
</script>

Answer 2

[Евгений Мальцев]

class TeamAdmin(admin.ModelAdmin)
    model = Team
    filter_horizontal = ('opetest',)

Comments

[coalesce]

спасибо Евгений Мальцев
Для админки admin.py то что надо.

Для своей формы forms.py использую помощь Сергей Горностаев