django - 如何使用垂直列将python字典呈现为html表

我有一个python dict，其中每个键对应一个标题，并且与每个标题关联的列表包含任意数量的值:

data = {
    "heading1": ['h1-val1', 'h1-val2', 'h1-val3', ],
    "heading2": ['h2-val1', ],
    "heading3": ['h3-val1', 'h3-val2', 'h3-val3', 'h3-val4', ],
}

我需要在Django模板中将其呈现为表格，其中值在每个标题的下方垂直列出，所有缺失的值均显示为空表格单元格:

<table>
<thead>
    <tr>
    <th>heading1</th>
    <th>heading2</th>
    <th>heading3</th>
    </tr>
</thead>
<tbody>
    <tr>
    <td>h1-val1</td>
    <td>h2-val1</td>
    <td>h3-val1</td>
    </tr>
    <tr>
    <td>h1-val2</td>
    <td></td>
    <td>h3-val2</td>
    </tr>
    <tr>
    <td>h1-val3</td>
    <td></td>
    <td>h3-val3</td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    <td>h3-val4</td>
    </tr>
</tbody>
</table>

实现此目标的最佳方法是什么？

我的第一个倾向是将原始字典重新排列为2D矩阵，然后将其传递到模板中。我敢肯定，我不是第一个遇到这种问题的人，而且我很好奇其他人如何解决了这个问题。

更新:仅供引用，这是我对这个问题的最初解决方案(我不太满意)。

# Using the data dict from the question:
size = max(len(data['heading1']), len(data['heading2']), len(data['heading3']))
matrix = [[None, None, None] for i in range(size)] # initialize an empty matrix

# manually copy the data into the appropriate column :(
i = 0
for item in data['heading1']:
    matrix[i][0] = item
    i += 1
i = 0
for item in data['heading2']:
    matrix[i][1] = item
    i += 1
i = 0
for item in data['heading3']:
    matrix[i][2] = item
    i += 1

然后，我将矩阵传递给模板，如下所示:

<table>
<thead><tr>
    <th>heading1</th>
    <th>heading2</th>
    <th>heading3</th>
</tr></thead>
<tbody>
{% for row in matrix %}
    <tr>
    {% for col in row %}
        <td>{% if col %}{{ col }}{% else %}&nbsp;{% endif %}</td>
    {% endfor %}
    </tr>
{% endfor %}
</tbody>
</table>

最佳答案

如果我们稍微改变一下游戏，实际上可以轻松解决这个问题(只要您的列表没有填满...)

from django.template import Context, Template

data = {
    "heading1": ['h1-val1', 'h1-val2', 'h1-val3', ],
    "heading2": ['h2-val1', ],
    "heading3": ['h3-val1', 'h3-val2', 'h3-val3', 'h3-val4', ],
}

# we'll need to split the headings from the data
# rather than using keys() I'm just hard coding so I can control the order
headings = ["heading1", "heading2", "heading3"]

columns = [data[heading] for heading in headings]

# get the length of the longest column
max_len = len(max(columns, key=len))

for col in columns:
    # padding the short columns with None
    col += [None,] * (max_len - len(col))

# Then rotate the structure...
rows = [[col[i] for col in columns] for i in range(max_len)]


dj_template ="""
<table>
{# headings #}
    <tr>
    {% for heading in headings %}
        <th>{{ heading }}</th>
    {% endfor %}
    </tr>
{# data #}
{% for row in data %}
    <tr>
        {% for val in row %}
        <td>{{ val|default:'' }}</td>
        {% endfor %}
    </tr>
{% endfor %}
</table>
"""

# finally, the code I used to render the template:
tmpl = Template(dj_template)
tmpl.render(Context(dict(data=rows, headings=headings)))

对我来说，这将产生以下内容(空白行被删除):

<table>
    <tr>
        <th>heading1</th>
        <th>heading2</th>
        <th>heading3</th>
    </tr>
    <tr>
        <td>h1-val1</td>
        <td>h2-val1</td>
        <td>h3-val1</td>
    </tr>
    <tr>
        <td>h1-val2</td>
        <td></td>
        <td>h3-val2</td>
    </tr>
    <tr>
        <td>h1-val3</td>
        <td></td>
        <td>h3-val3</td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td>h3-val4</td>
    </tr>
</table>