如何在多列中呈现 form.as_table答案

【问题标题】：How to render form.as_table in multiple columns如何在多列中呈现 form.as_table
【发布时间】：2013-12-07 05:09:49
【问题描述】：

我正在使用模型表单，并且我在模板中呈现了该表单，如下所示。

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

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

【问题讨论】：

您可以遍历表单字段并根据需要进行渲染。
Rohan 你能告诉我一个示例代码，如何迭代。谢谢

标签： python django django-forms django-templates templatetag

【解决方案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%}

【讨论】：

【解决方案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 个元素，它会产生如下内容：

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

我使用 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>

【讨论】：

【解决方案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_p 和 form.as_table 有关的相同问题。我已使用此代码正确对齐字段标签及其值...如果我们将其放在标记下并使用此格式，您的字段将被对齐。