カウントリストをカスタマイズする

StackOverflow https://stackoverflow.com/questions/1818158

  •  10-07-2019
  •  | 
  •  

質問

私はこのコードを使用して、車両の年、メーカー、シリーズ、ボディスタイル、色に分類されたレコードのリストを生成しています。これをさらにこのようにカスタマイズしたいと思います：

  • その年については、2004年までを個別にしたい...残りは2009年、2008年、2007年、2006年、2005年、2004年、その他に分類されます
  • メイクについては、最も人気のある6つのメイクを表示したい...メイクの人気にプライマリ（最高）、セカンダリ、ターシャリの値を割り当てるために使用しているモデルのフィールドがあります。残りはその他に分類されます。
  • ボディのスタイルと色については、[その他]に分類されるレコードが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'))
役に立ちましたか？

解決 2

解決策を得ることができたので、ここで答えを更新するとよいと思いました：

ヘッドセクションには以下があります：

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

他のヒント

あなたが求めているものの大部分は、おそらく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>

これはかなり単純な例であり、<！> quot; Show More <！> quot;を切り替えません。 <！> quot;さらに非表示<！> quot;しかし、コンテキストからそれを把握できるはずです。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top