自定义计数列表

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，并且它不会将“显示更多”切换为“隐藏更多”，但您应该能够从上下文中弄清楚。