Question

假设我的sql表看起来像这样..

产品表

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

在django视图中，我从该表中获取了所有记录并将其传递给模板..

def compare(request):
    product_ids = request.GET.get('product_ids')
    products = Product.objects.filter(id__in=product_ids)
    return render(request, 'compare.html', {'products': products})

因为query_set结果记录就像一个接一个地说我们可以说它遵循行方式但是对于这种情况在模板中我想创建一个html表，结果应该是这样的..

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

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

所以请建议我在Django中使用一个更好的方法来实现这个目标，如果我错了，请纠正我，因为我是Django的初学者。

提前致谢

Answer 1

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

转置此2d矩阵

t_products = list(zip(*products))
# OUTPUT: [(1, 2, 3), ('ABC', 'XYZ', 'ZYX'), ('Samsung', 'LG', 'Sony')]

最后你可以在你的模板中循环它

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

Answer 2

你可以用这个来做;

<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 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表示样式将适用于超小屏幕尺寸及以上（即所有屏幕），3表示将屏幕分为12/3 = 4部分。如果您想要，例如，6列，那么您必须使用col-xs-2。

如果您不想引入Bootstrap的开销，那么您可以使用为{3}引入的flex boxes。

.flexcontainer {
    display: flex;
    flex-direction: row;
}

Answer 4

您可以使用pandas.DataFrame.transpose()，即

import pandas as pd
from django_pandas.io import read_frame
df = read_frame(product)
table_html = df.transpose().to_html()

您只需将table_html字符串传递给模板；这里不需要模板逻辑。有几种方法可以将QuerySet转换为DataFrame。在这里，我使用的是ReadCore(byte[] buffer, int offset, int count)。

如何将Django查询集作为列方式呈现到html表中？

4 个答案: