카운트 목록을 사용자 정의하십시오

Question

이 코드를 사용하여 차량의 연도, 제작, 시리즈, 바디 스타일 및 색상으로 분류 된 레코드 목록을 생성합니다. 이 방법으로 이것을 더 사용자 정의하고 싶습니다.

• 올해는 2004 년까지 개인이되고 싶다.
• 제조사를 위해, 나는 6 개의 제조업체를 가장 인기가 높은 것으로 표시하고 싶습니다 ... 모델에는 1 차 (가장 높은), 2 차 또는 3 차 가치의 제조업체의 인기를 할당하기 위해 사용하는 필드가 있습니다. 나머지는 다른 사람에 속할 것입니다.
• 바디 스타일과 색상의 경우 3 개 미만의 레코드가 다른 항목이 다른 항목 아래에 떨어지고 싶습니다.

내 코드는 다음과 같습니다.

year_count = vehicle_query.order_by(
  '-common_vehicle__year__year').values('common_vehicle__year__year').
  annotate(count=Count('id'))
make_count = vehicle_query.order_by(
  'common_vehicle__series__model__manufacturer__manufacturer').
  values('common_vehicle__series__model__manufacturer__manufacturer').
  annotate(count=Count('id'))
style_count = vehicle_query.order_by(
  'common_vehicle__body_style__style').values
  ('common_vehicle__body_style__style').annotate(count=Count('id'))
colour_count = vehicle_query.order_by(
  'exterior_colour__exterior_colour').values(
  'exterior_colour__exterior_colour').annotate(count=Count('id'))

Answer 1

솔루션을 얻었으므로 여기에서 답을 업데이트하는 것이 좋을 것이라고 생각했습니다.

헤드 섹션에는 다음과 같습니다.

<script type="text/javascript" src="{{ MEDIA_URL }}share/jquery/jquery.min.js"></SCRIPT>
<script type="text/javascript">
(function($) {
$(document).ready(function() {
    //hide the additional content under "Display More"
    $("div.additional_content").hide();

    $("a.more").click(function () { 
        //show or hide the additional content
        $(this).siblings("div.additional_content").toggle();
        //change the attributes and text value of the link toggle
        if($(this).text() == "Display Less"){
            $(this).removeClass("less");
            $(this).addClass("more");
            $(this).html("Display More");
        }else{
            $(this).removeClass("more");
            $(this).addClass("less");
            $(this).html("Display Less");
        }
        return false;
    });             
});
})(jQuery);

그런 다음 사용 가능한 옵션 수를 줄이려는 곳이 어디에 있든 다음과 같습니다.

<div class="module_wrap">
  <div class="module"> {% if year_count %} <strong>{% trans "Year" %}</strong> <br />
    {% for item in year_count|slice:":6" %}
    <ul>
      <li> <a href="/inventory/year/{{ item.common_vehicle__year__year }}/">{{ item.common_vehicle__year__year }} ({{ item.count }})</a> {% if request.session.chosen_year %} <a href="/undo_year/"><img src="{{ MEDIA_URL }}img/undo.gif" border="0" alt="Remove Year Filter" title="Remove Year Filter" /></a> {% endif %} </li>
    </ul>
    {% endfor %}
    <div class="additional_content"> {% for item in year_count|slice:"6:" %}
      <ul>
        <li> <a href="/inventory/year/{{ item.common_vehicle__year__year }}/">{{ item.common_vehicle__year__year }} ({{ item.count }})</a></li>
      </ul>
      {% endfor %} </div>
    {% if year_count|slice:"6:" %}<a href="" class="more">Display More</a><br />
    {% endif %} <br />
  </div>
</div>
{% endif %}

Answer 2

당신이 요구하는 것의 대부분은 아마도 Django 외부와 클라이언트 측 JavaScript에 의해 더 잘 처리 될 것입니다. 분명히, 당신 ~할 수 있었다 Django가 부분적으로 처리하지만 더 깨끗하지 않을 것입니다. 이런 식으로 수행하는 데 이점이 있습니다.

1. Django 템플릿 코드는 더 깨끗하게 유지됩니다
2. 멋지게 저하 될 것입니다
3. 나중에 인터페이스를 업데이트 할 수 있으며 (JavaScript 변경) Django 템플릿을 깨는 것에 대해 걱정할 필요가 없습니다.

이것을 처리하려면 단순히 주어진 경우 스크립트를 만들 수 있습니다. <ul> 태그 (및 아마도 일부 인수)는 해당 목록이 묻는 형식으로 렌더링됩니다.

다음은 jQuery를 사용하는 간단한 예입니다. 이 예에서는 jQuery 플러그인 패턴을 사용하여 기능을 랩핑하겠습니다.

Django 템플릿이 다음을 출력한다고 말합니다 ...

<ul>
    <li>Chevy</li>
    <li>Mazda</li>
    <li>Honda</li>
    <li>Ford</li>
    <li>BMW</li>
</ul>

jQuery.showmorelist.js

(function($) {

    $.fn.ShowMoreList = function(visibleItemCount) {

        // Wrap parent element
        var parent = $(this).wrap('<div class="show-more-list"></div>').parent();
        var ul = $(this);

        // Enumerate children and hide extras
        var counter = 0;
        $(this).children().filter('li').each(function(){
            counter += 1;
            if (counter > visibleItemCount) {
                $(this).hide();
                $(this).addClass('hidden');
            }
        });

        // Add link and bind click
        var link = $('<a href="#">&gt; Show More</a>').click(function(){
           $(ul).children().filter('.hidden').show();
        });
        $(parent).append(link);
    }

})(jQuery);

page.html

<script type="text/javascript" src="jquery.showmorelist.js"></script>
<script type="text/javascript">
    // On page load...
    $(function() {
            $('ul').ShowMoreList(4);    // Shows only the first 4 items
    });
</script>

이것은 다소 간단한 예이며, "더 많은 쇼"를 "더 숨기기"로 전환하지는 않지만 상황에서이를 알아낼 수 있어야합니다.