Personnaliser la liste de comptage

Question

J'ai ce code que j'utilise pour générer une liste d'enregistrements classés par année, marque, série, style de carrosserie et couleur pour les véhicules. J'aimerais personnaliser davantage cette façon:

• pour l’année, je souhaite que jusqu’en 2004, le statut individuel ne soit pas pris en compte, le reste relèvera des autres catégories, à savoir 2009, 2008, 2007, 2006, 2005 et 2004.
• pour la marque, je veux afficher les six marques avec la plus grande popularité ... Il existe un champ dans le modèle que j'utilise pour attribuer la popularité d'une marque avec une valeur primaire (plus élevée), secondaire ou tertiaire. . Le reste appartiendra à Autre.
• Pour le style et la couleur du corps, je souhaite que les éléments comportant moins de 3 enregistrements soient classés sous Autres.

Mon code est comme ci-dessous:

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

J'ai réussi à trouver une solution, alors j'ai pensé qu'il serait bon de mettre à jour la réponse ici:

Dans la section principale, j'ai ceci:

<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);

Puis, partout où je veux réduire le nombre d'options disponibles, voici ce que je vous présente:

<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

La majeure partie de ce que vous demandez serait probablement mieux traitée en dehors de Django et au lieu de javascript côté client. Pour être clair, vous pourriez faire manipuler des portions par Django, mais ce serait plus propre si vous ne le faisiez pas. Il y a des avantages à le faire de cette façon:

1. Votre code de modèle Django reste plus propre
2. Cela se dégradera bien
3. Vous pouvez ultérieurement mettre à jour l'interface (changer le javascript) sans avoir à vous soucier de casser le modèle Django

Pour gérer cela, vous pouvez simplement créer un script qui, lorsqu'il reçoit une balise <ul> (et peut-être quelques arguments), restituera cette liste dans le format que vous souhaitez.

Voici un exemple simple d'utilisation de jQuery. Pour cet exemple, je vais envelopper la fonctionnalité dans un modèle utilisant un plugin jQuery.

Dites que votre modèle django génère les éléments suivants ...

<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>

Ceci est un exemple assez simple et il ne changera pas le & "Afficher plus &"; pour " Cacher plus " mais vous devriez être capable de comprendre cela à partir du contexte.