تخصيص قائمة العد

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 وبدلاً من ذلك عن طريق جافا سكريبت من جانب العميل.لكي أكون واضحا، أنت استطاع لديك أجزاء يتم التعامل معها بواسطة Django، ولكن سيكون من الأنظف عدم القيام بذلك.هناك فوائد للقيام بذلك بهذه الطريقة:

1. يظل رمز قالب Django الخاص بك أكثر نظافة
2. سوف تتحلل بشكل جيد
3. يمكنك لاحقًا تحديث الواجهة (تغيير جافا سكريبت) ولا داعي للقلق بشأن كسر قالب 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>

هذا مثال بسيط إلى حد ما، ولن يقوم بتبديل "إظهار المزيد" إلى "إخفاء المزيد" ولكن يجب أن تكون قادرًا على معرفة ذلك من السياق.