Блог

В модели django я создал multiselectfield для предположительного списка пожеланий, где пользователь может выбрать несколько пожеланий из доступных вариантов.

Я сохраняю эти данные в формате, разделенном запятыми, когда дело доходит до отображения этого в шаблоне, все довольно просто.

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

Для справки:

 # models.py
class Wishlist(models.Model):
    wishlist = (
        ('W1',"Buy a big masion"),
         ('W2',"Buy worlds fastest car"),
          ('W3',"Visit Europe"),
           ('W4',"Travel on bike to mountains")
    )
    
    your_wishlist = MultiSelectField(choices=wishlist)

# views.py
def index(request):
    wishlist = Wishlist.objects.all()
    context = {
        "wishlist":wishlist
    }
    return render(request,'demolistingapp/index.html',context)

# index.html
{% load app_filters %}
{% block content %}
<h1>INDEX LISTING APP</h1>
{% if wishlist %}
    {% for each_wish in wishlist %}
       {% with  each_wish.your_wishlist|split:"," as wish %}
            {% for mywish in wish %}
                <p>{{mywish}}</p><br>
            {% endfor %}
       {% endwith %}
    {% endfor %}
{% endif %}
{% endblock %}
  

Я зарегистрировал разделение пользовательского фильтра, которое возвращает список.
Я хочу, чтобы данные отображались в виде сетки путем сохранения двух столбцов.

Пример вывода: введите описание изображения здесь

Вы могли бы использовать цикл в шаблонах для создания другого класса:

 <p class="{% cycle row_left row_right %}">{{ mywish }}</p>
  

с соответствующим css (float / clear или inline-block; ширина: 50%).

Я бы обернул ваш внешний цикл for в HTML-элемент с классом, а затем применил макет сетки к этому классу в вашей таблице стилей. Обертывание каждого желания в элементе div с определенным классом также поможет вам с дальнейшим оформлением.

 <div class="wishlist">
    {% for each_wish in wishlist %}
       {% with  each_wish.your_wishlist|split:"," as wish %}
            {% for mywish in wish %}
                <div class="wish">
                    <p>{{mywish}}</p>
                </div>
             {% endfor %}
       {% endwith %}
    {% endfor %}
</div>
  

И в вашем CSS:

 .wishlist {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
}