使用django html模板创建具有动态行和列的表

时间:2018-02-12 15:36:53

标签: javascript html django django-templates frontend

我尝试使用django html模板根据结果列表创建一个包含动态行和列的表。记录数和标题号可能会更改。我使用两个for循环来获取行数和列号。我很难尝试输出表格中的实际值。这个想法是指数"索引"从第二个for循环并将其应用到"每个"第一个循环。我知道语法肯定是错的,但django可以做什么?如果没有,有什么建议我可以研究如何实现这个?谢谢!!

list = [
  {'header_a': foo1, 'header_b': foo2, 'header_c': foo3},
  {'header_a': foo1, 'header_b': foo2, 'header_c': foo3},
  {'header_a': foo3, 'header_b': foo3, 'header_c': foo3},
  {'header_a': foo4, 'header_b': foo4, 'header_c': foo4},
]

Sample Table
header_a | header_b | header_c
foo1     | foo1     | foo1        
foo2     | foo2     | foo2   
foo3     | foo3     | foo3   
foo4     | foo4     | foo4

list_2 = [
  {'header_c': c_foo1, 'header_d': d_foo1}, 
  {'header_c': c_foo2, 'header_d': d_foo2},
]

Sample Table 2
header_c | header_d
c_foo1   | d_foo1
c_foo2   | d_foo2
<table>
<thead>
  <tr>
    {% for index in list.0 %}
    <th>{{ index }}</th>
    {% endfor %}
  </tr>
</thead>
<tbody>
  {% for each in list %}
  <tr>
    {% for index in a %}
    <td>{{ each.{{index}} }}</td>
    {% endfor %}
  </tr>
  {% endfor %}
</tbody>
</table>

2 个答案:

答案 0 :(得分:1)

也许你应该看看django tables?使用django创建功能强大的表是一个非常着名的工具。您可以根据模型创建它们,但您也可以直接将数据传递给它们。我也曾用它来创建一个动态表。它从模板中获取所有工作,并将其添加到视图中,以便更容易操作。

答案 1 :(得分:1)

好吧,因为你在该模式中有一个dicionaries列表,所以你可以在模板中迭代它:

<table>
    <thead>
        <tr>
        {% for item in list %}
            {% if forloop.first %}
                {% for h in item %}
                    <th>{{ h }}</th>
                {% endfor %}
            {% endif%}
        {% endfor %}
        </tr>
    </thead>
    <tbody>
        {% for item in list %}
            <tr>
                {% for key,value in item.items %}
                    <td>{{ value}}</td>
                {% endfor %}
            </tr>
        {% endfor %}
    </tbody>
</table>

假设你在每个字典中都有相同的键(列标题或字段,你命名它们),你首先只迭代第一个dicionary来获取它的键,然后,你再次迭代行的值......

如果您可以重写创建该列表的方式,那么这不是最有效的解决方案。

希望它有所帮助,请确认它是否有效