在表格行中显示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

我认为最简单的方法是a）确定视图中的分组列表，或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 %}