顯示錶格行中最大數量的td元素

Question

我在動態呈現多個計量表的頁面上使用http://www.highcharts.com/demo/gauge-speedometer。儀表按其當前級別分組。我只需要最多連續6個儀表與任何附加儀表顯示在一個新行上。

儀表都工作正常。但是，如果有7個等級爲「紅色」的儀表，它們將從頁面流出。

我的觀點返回「gauge_list」，這是這樣的每個計詞典列表：

{'cnt': 48, 'yellow_to': 66, 'level': 'yellow', 'gauge_min': 0, 'gauge_link': 'gauges:contracts', 'green_to': 33, 'gauge_max': 100, 'gauge_title': 'contracts', 'gauge_name': 'Contracts'}                      

在處理這種最好的方式有什麼建議？

<div class="row"> 
    <div class="span12"> 
     <table> 
     {% for gauge in gauge_list %} 
      {% if gauge.level == "red" %} 
       <td><div id="{{gauge.gauge_title}}" style="width: 280px; height: 210px; margin: 0 auto"></div></td> 
      {% endif %} 
     {% endfor %} 
     </table> 
    </div> 
</div> 
<div class="row"> 
    <div class="span12"> 
     <table> 
     {% for gauge in gauge_list %} 
      {% if gauge.level == 'yellow' %} 
       <td><div id="{{gauge.gauge_title}}" style="width: 280px; height: 210px; margin: 0 auto"></div></td> 
      {% endif %} 
     {% endfor %} 
     </table> 
    </div> 
</div> 
<div class="row"> 
    <div class="span12"> 
     <table> 
     {% for gauge in gauge_list %} 
      {% if gauge.level == 'green' %} 
       <td><div id="{{gauge.gauge_title}}" style="width: 280px; height: 210px; margin: 0 auto"></div></td> 
      {% endif %} 
     {% endfor %} 
     </table> 
    </div> 
</div> 

Answer 1

我認爲這樣做最簡單的辦法是，要麼一）確定在視圖中的分組列表或者b）使用內置groupby模板標籤。 groupby要求字典列表由分組鍵排列，在此將爲level。這在視圖中是最好的，因爲你可能不希望dictsort過濾器會給你的天真的字母排序。

{% regroup gauge_list by level as level_list %} 
    {% for level in level_list %} 
     <div class="row"> 
     <div class="span12"> 
      <table> 
       {% for gauge in level.list %} 
       {% if forloop.counter0|divisibleby:"6" %} 
        {% if not forloop.first %}</tr>{% endif %}      
        <tr> 
       {% endif %} 
       <td><div id="{{gauge.gauge_title}}" style="width: 280px; height: 210px; margin: 0 auto"></div></td> 
       {% endfor %} 
       </tr> 
      </table> 
     </div> 
     </div> 
    {% endfor %} 

通過在視圖中做，我的意思是這樣提供一個嵌套的數據結構，而不是一個簡單的列表。喜歡的東西：

levels_and_gauges = [['red', [...red guage dicts]], 
        ['yellow', [...yellow guage dicts]], 
        ['green'], [...green guage dicts]]] 

模板代碼將隨後是這樣的：

{% for level, guages in levels_and_guages %} 
    <div class="row"> 
    <div class="span12"> 
     <table> 
      {% for guage in guages %} 
      {% if forloop.counter0|divisibleby:"6" %} 
       {% if not forloop.first %}</tr>{% endif %}      
       <tr> 
      {% endif %} 
      <td><div id="{{gauge.gauge_title}}" style="width: 280px; height: 210px; margin: 0 auto"></div></td> 
      {% endfor %} 
      </tr> 
     </table> 
    </div> 
    </div> 
{% endfor %} 

或者你可以組到視圖，而不是模板6長度行。

Answer 2

{% for level in ["red", "yellow", "green"] %} 
    <div class="row"> 
     <div class="span12"> 
      <table> 
      {% for gauge in gauge_list %} 
       {% if gauge.level == level %} 
        <td><div id="{{gauge.gauge_title}}" style="width: 280px; height: 210px; margin: 0 auto"></div></td> 
       {% endif %} 
      {% endfor %} 
      </table> 
     </div> 
    </div> 
{% endfor %}