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

显示表格行中的最大td元素数

2 个答案: