Django模板实现列表按每3元素分组逐行渲染，解决值同行展示问题

• 数据结构错位：原视图将所有变电站下所有母线的电压数据全部写入全局扁平列表data，最终通过zip打包成全局共享的grouped_list，没有将每个母线对应的电压数据和母线实体做绑定，会导致不同母线的数据交叉错位。
• 标签结构错误：原模板将遍历grouped_list的逻辑写在同一个<tr>标签内部，无论循环生成多少组数据，都不会生成独立的表格行，所有内容自然全部挤在同一行。
• 迭代器消耗问题：zip()返回的是惰性迭代器，Django模板第一次遍历完成后迭代器就会被全部耗尽，多母线场景下后续循环无法获取到有效数据。

1. 视图层调整：数据和实体绑定，替换惰性迭代器 #

将原来全局汇总的逻辑改为逐母线绑定专属的电压行列表，每个列表元素存储独立的三元组（日期、小时、电压值），替换原有全局共享的grouped_list：

def dashboard(request):
    buses = get_bus_of_substation(request)
    transformers = get_transformer_of_substation(request)

    for bus in buses:
        # 为每个母线绑定独立的电压渲染行列表
        bus.voltage_render_rows = []
        target_dt = None
        matched_volt_data = None

        # 回溯最近25小时查找有效数据
        for i in range(25):
            current_dt = datetime.datetime.today() - datetime.timedelta(hours=i)
            query_time = current_dt.strftime('%Y-%m-%d %H:00:00')
            matched_volt_data = get_voltage(query_time, bus.substation_equipment_id)
            if matched_volt_data:
                target_dt = current_dt
                break

        # 组装渲染行数据
        if matched_volt_data and target_dt:
            date_str = target_dt.strftime('%Y-%m-%d')
            hour_str = target_dt.strftime('%H:00:00')
            # 每个电压值对应独立一行
            for volt in matched_volt_data:
                bus.voltage_render_rows.append((date_str, hour_str, volt.val))
        else:
            # 无数据场景占位
            bus.voltage_render_rows.append(('No Data', 'No Data', 'No Data'))

    return render(request, 'dashboard.html', context={
        'buses': buses,
        'transformers': transformers
    })

2. 模板层调整：按分组生成独立表格行 #

去掉原有的全局grouped_list遍历逻辑，逐行渲染每个电压三元组，针对单母线对应多行电压的场景，通过rowspan合并母线名称单元格，保证表格结构整齐：

<table class="table table-hover">
    <thead>
    <tr>
        <th scope="col">Bus Name</th>
        <th scope="col">Date</th>
        <th scope="col">Hour</th>
        <th scope="col">Voltage(kV)</th>
    </tr>
    </thead>
    <tbody>
    {% for bus in buses %}
        {% for row in bus.voltage_render_rows %}
        <tr class="table-active">
            {# 仅第一行渲染母线名称，后续行跨行列合并 #}
            {% if forloop.first %}
            <td rowspan="{{ bus.voltage_render_rows|length }}">{{ bus.bus_name }}</td>
            {% endif %}
            <td>{{ row.0 }}</td>
            <td>{{ row.1 }}</td>
            <td>{{ row.2 }}</td>
        </tr>
        {% endfor %}
    {% endfor %}
    </tbody>
</table>

修改后每3个值组成的三元组会独立渲染为一个<tr>表格行，完全实现“每3个值占独立一行、直到遍历完所有数据”的需求，同时不会出现不同母线数据错位、迭代器耗尽无数据的问题。

内容的提问来源于stack exchange，提问作者Taufique Alam