自定義計數列表

Question

我有這段代碼用於生成一個記錄列表，分類爲車輛的年份，品牌，系列，車身樣式和顏色。我想這樣進一步定製：

• 這一年，我想只有到2004年纔是個人...其餘的將會在2009年，2008年，2007年，2006年，2005年，2004年，其他。
• 對於品牌，我想展示六種最受歡迎​​的品牌...我使用的模型中有一個字段用於指定品牌的受歡迎程度，其中主要（最高），二級或三級。其餘的將歸入其他。
• 對於身體的風格和顏色，我希望有少於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> 

這是一個相當簡單e xample，並且它不會將「顯示更多」切換爲「隱藏更多」，但您應該能夠從上下文中弄清楚。