Question

我正在使用模型表单，我在模板中渲染该表单如下所示。

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

但问题是，它将所有字段呈现为行。由于我的模型包含超过200行，当它显示元素为200行时，它看起来很糟糕。我想将它们分成5列，所以总行数约为40-43。是否有任何内置的模板标签可用于此问题或任何其他方式，我们可以使用它来解决问题。

Answer 1

您可以参考此文档：looping over form fields

您可以在模板中执行的操作

{% 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%}

Answer 2

你的问题有点不清楚，但这个例子绰绰有余。

循环遍历列表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个元素，它会产生如下内容：

enter image description here

Answer 3

这对我来说效果更好（divisibleby：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>

Answer 4

我使用引导程序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>

Answer 5

<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>

如何在多列中呈现form.as_table

5 个答案: