Как отобразить form.as_table в нескольких столбцах

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

 <table>
    {{form.as_table}}
 </table>

Но проблема в том, что все поля отображаются в виде строк. Поскольку моя модель содержит более 200 строк, при отображении элементов в 200 строк она выглядит плохо. Я хочу разделить их на 5 столбцов, поэтому общее количество строк будет около 40-43. Есть ли какой-либо встроенный тег шаблона, доступный для этого или любого другого способа, с помощью которого мы можем решить проблему.

Источник

6 ответов

Решение

Вы можете сослаться на этот документ: цикл по полям формы

Что вы можете сделать в своем шаблоне

{% for field in form %}

    {%if forloop.counter|divisibleby:"5" %}
        {#after 5 fields, somehow put elements in next row
         of table, paragraph, or using divs etc
        #}
    {%endif%}

    {{field}}
{%endfor%}
Источник

Это работало лучше для меня (делится на: n, n = количество столбцов):

          <form enctype="multipart/form-data" method="POST">
                {% csrf_token %}
                {% for field in form %}
                    {{ field.label }} {{ field }}
                    {% if forloop.counter|divisibleby:"2" %}
                        <br>
                    {% endif %}
                {% endfor %}
                <input type="submit" value="Continue" />
            </form>
Источник

Ваш вопрос немного неясен, однако этого примера более чем достаточно.

цикл перебирает список data и я заменил так, чтобы он отображал column1,column2,column3,column4,column5 в каждом ряду для примера.

<!DOCTYPE html>
<html>
<head>
    <title>Jack of All Trades</title>
</head>
<body>
<table border="1">
{% for element in data %}
    <tr>
    <td><p>column 1 </p></td>
    <td><p>column 2 </p></td>
    <td><p>column 3 </p></td>
    <td><p>column 4 </p></td>
    <td><p>column 5 </p></td>
    </tr>
{% endfor %}
</tr>
</table>
</body>
</html>

Если предположить, data имеет 5 элементов, это будет производить что-то вроде этого:

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

Источник

Еще один вариант, который следует учитывать в более новых версиях Django, — использовать повторно используемые шаблоны форм для создания шаблона формы для вызова как , точно так же, как вы бы вызывали{{ form.as_table }}в вашем шаблоне.

У этого есть несколько приятных особенностей:

  • АFormSetкаждая форма завернута в<tr>но поля, завернутые в<td>может сосуществовать с другими хорошими надстройками, такими как django-dynamic-formset
  • Этот метод можно использовать для других элементов, с помощью которых вы, возможно, захотите отображать формы.

Шаги:

  1. Создать RenderMixinкоторый реализует как as_td()метод, который будет называться как в вашем шаблоне
      from django.forms.utils import RenderableMixin

class ColumnRenderableFormMixin(RenderableMixin):
  def as_td(self):
    """Render as <td> elements excluding the surrounding <table> tag."""
    return self.render(self.template_name_td)
  1. Создайте многоразовый шаблон в каталоге шаблонов вашего приложения (или другом подходящем каталоге).
  • Шаблон будет выглядеть так же, как стандартные шаблоны Django в django/forms/templates/django/forms/*.html.
  • Голый пример костей, помещенный вsomeapp/templates/td.htmlможет быть:
      {% for field, errors in fields %}
  <td>
    {{ errors }}
    {{ field }}
  </td>
{% endfor %}
  1. Добавьте пользовательский миксин в свою форму и укажите td.htmlпуть к файлу шаблона в template_name_tdпеременная класса:
      class SomeForm(ModelForm, ColumnRenderableFormMixin):
  template_name_td = "someapp/td.html"
  1. В шаблоне представления отобразите форму с помощью {{ form.as_td }}.
  • Если вы используете набор форм, это будет выглядеть следующим образом:
      <table class="table">
{% for form in formset %}
  <tr>
    {{ form.as_td }}
  </tr>
{% endfor %}
</table>
Источник

Я использую bootstrap 4, а имя тега формы - employee_in. В каждом из двух столбцов есть 6 полей ввода (исправлено, кто-нибудь еще знает, как сделать это автоматически?), Что я могу сделать до сих пор, надеюсь, это поможет

  <form enctype="multipart/form-data" method="post">
    {% csrf_token %}
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-6">
          <table class = 'table table-hover'>
            {% for my_divider in employee_in %}
              {% if forloop.counter <= 6 %}
                <tr>
                  <td>{{ my_divider.label }}</td>
                  <td>{{ my_divider }}</td>
                </tr>
              {% endif %}
            {% endfor %}
          </table>
        </div>
        <div class="col-lg-6">
          <table class = 'table table-hover'>
            {% for my_divider in employee_in %}
              {% if forloop.counter > 6 %}
                <tr>
                  <td>{{ my_divider.label }}</td>
                  <td>{{my_divider}}</td>
                </tr>
              {% endif %}
            {% endfor %}
          </table>
        </div>
      </div>
    <input type="submit" class = 'btn btn-secondary' value="Submit">
    </div>
  </form>
Источник 
<form method="POST">
{% csrf_token %}
<table>
    {% for field in form %}
        <tr>
            <td>{{ field.label}}</td>
            <td>{{ field }}</td>
        </tr>
    {% endfor %}
</table>
<button type="submit" class="btn btn-primary">Submit</button>
Источник
Другие вопросы по тегам