Django 쿼리를 html 테이블에 열 현명한 것으로 렌더링하는 방법은 무엇입니까?

Question

의 내 SQL 테이블은 다음과 같습니다 가정 해 봅시다 ..

제품 테이블

장고에

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

내가이 테이블에서 모든 레코드를 가져 및 템플릿에 전달 볼 ..

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 테이블을 만들고 싶고 결과는 t와 같아야한다. 그의 .. ..

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

위의 예제를 보면 데이터가 열 현명한 것으로 렌더링 된 것을 볼 수 있습니다.

장고에서 더 좋은 방법을 제안 해주세요. 장고에서 초보자인데 내가 틀렸다면이 문제를 해결해주세요.

미리 감사드립니다.

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')] 

지금 사용하여이 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을 사용해야합니다.

부트 스트랩의 오버 헤드를 들여오고 싶지 않은 경우 CSS3에 들어온 flex boxes을 사용할 수 있습니다.

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