Использование django-select2 для выпадающего списка с картинками - PullRequest
Новая
       25

Использование django-select2 для выпадающего списка с картинками

0 голосов
/ 19 октября 2018

Я пытаюсь использовать другой подход для решения проблемы, описанной ниже, используя модуль django-select2 .

Поле выбора Django с использованием изображений вместо текста, не отображаемого

У меня есть модель django, которая выглядит следующим образом:

Моя модель выглядит так: 

class MyPicture(models.Model):
    name = models.CharField(max_length=60,
                            blank=False,
                            unique=True)
    logo = models.ImageField(upload_to='logos')

    def __str__(self):
        return self.name

Я хотел бы создать раскрывающийся список, похожий на

enter image description here

источник: http://select2.github.io/select2/

, где по существу у меня есть большая картинка слева (соответствует тому, что я назвал логотипом) и некоторый текстсправа (соответствует имени).

Моя форма выглядит следующим образом: 

from django_select2.forms import Select2MultipleWidget

class MyPictureForm(forms.Form):
    pictures = forms.ModelChoiceField(widget=Select2MultipleWidget, queryset=MyPicture.objects.all())

Мой взгляд выглядит следующим образом: 

def mypicture(request):
    form = MyPictureForm(request.POST or None)

    if form.is_valid():
        #TODO

    return render(request, 'myproj/picture.html', {'form': form})

и, наконец, мой HMTL (гдечто-то не так): 

{% load staticfiles %}

<head>
    {{ form.media.css }}
    <title>In construction</title>
</head>


<form action="{% url 'mypicture' %}" method="post">

    {% csrf_token %}
    <select id="#e4" name="picture">
        {% for x in form.pictures.field.queryset %}
            <option value="{{ x.id }}"><img src="{{ MEDIA_URL }}{{ x.logo.url }}" height=150px/></option>
        {% endfor %}
    </select>

    <br>
    <br>
    <input type="submit" value="Valider" class="btn btn-primary"/>
    <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
        function format(x) {
            if (!x.id) return x.name; // optgroup
            return "<img src=" + x.logo.url + "/>" + x.name;
        }
        $(document).ready(function () {
            $("#e4").select2({
                formatResult: format,
                formatSelection: format,
                dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
                escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
            });
        });
    </script>
    {{ form.media.js }}
</form>

К сожалению, я не достаточно хорош, чтобы сказать, есть ли моя ошибка в JavaScript или в цикле.Когда я щелкаю правой кнопкой мыши, чтобы получить исходный код, параметры установлены правильно.Поэтому я не должен быть далеко от ответа.

Это может быть тривиально для тех из вас, у кого больше опыта работы с javascript, чем у меня.

Спасибо за вашу помощь !!

Лучший:

Эрик

...