如何将Django查询集按列呈现到html表中？

Question

假设我的sql表如下所示。。在

产品表

--------------------------------
| id | Model| Manufacturer     |
--------------------------------
| 1  | ABC  | Samsung          |
| 2  | XYZ  | LG               | 
| 3  | ZYX  | Sony             |
--------------------------------

在django视图中，我从这个表中获取所有记录并将其传递给模板。。在

^{pr2}$

由于查询集结果记录一个接一个地出现，我们可以说它是按行排列的，但是对于这个模板中的这个例子，我想创建一个html表，结果应该是这样的。。在

--------------------------------------------
|id           | 1       | 2        | 3     |
|Model        | ABC     | XYZ      | ZYX   |
|Manufacturer | Samsung | LG       | Sony  |
--------------------------------------------

通过查看上面的示例，您可以看到数据是按列呈现的。在

所以请给我推荐一个更好的Django方法，我可以实现这一点，也请纠正我，如果我错了，因为我是Django初学者。在

提前谢谢

Answer 1

你可以这样做

<table>
  <tbody>
    <tr>
      <th>ID</th>
      {% for product in products %}<td>{{ product.id }}</td>{% endfor %}
    </tr>
    <tr>
      <th>Model</th>
      {% for product in products %}<td>{{ product.model }}</td>{% endfor %}
    </tr>
    <tr>
      <th>Manufacturer</th>
      {% for product in products %}<td>{{ product.manufacturer }}</td>{% endfor %}
    </tr>
  </tbody>
</table>

Answer 2

使用values\u list（）并将查询集转换为list

products = list(Product.objects.filter(id__in=product_ids).values_list('id', 'Model', 'Manufacturer'))
# OUTPUT: [(1, 'ABC', 'Samsung'), (2, 'XYZ', 'LG'), (3, 'ZYX', 'Sony')]

现在使用zip

^{pr2}$

最后，您可以在模板中循环它

<table>
  <tbody>
    {% for pl in t_products %}
    <tr>
      {% for l in pl%}
         <td>{{l}}</td>
      {% endfor %} 
    </tr>
    {% endfor %}
  </tbody>
</table>

Answer 3

您可以使用Bootstrap's grid system：

<div class="row">
    <div class="col-xs-3">
        <p>id</p>
        <p>Model</p>
        <p>Manufacturer</p>
    </div>
    {% for product in products %}
    <div class="col-xs-3">
        <p>{{ product.id }}</p>
        <p>{{ product.model }}</p>
        <p>{{ product.manufacturer }}</p>
    </div>
    {% endfor %}
</div>

col-xs-3表示该样式将应用于超小屏幕大小和向上（即所有屏幕），而{}表示将把屏幕分成12/3=4个部分。例如，如果需要6列，那么就必须使用col-xs-2。在

如果不想增加引导的开销，那么可以使用为CSS3引入的flex boxes。在

^{pr2}$