以列表的 jinja 形式构建 html 表

Question

我有一个很长的数据字典，看起来像这样，

('Item', 8): Components_data(base_quantity=63.0, items_data={'830927': [1.0, 14.851799999999999], '831103': [0.37170000000000003, 0.6972720300000002]}, price_labor=374.21824212, total=389.76731415)}

键是一个元组，我的值在一个命名元组中，有 3 个整数和 1 个字典，其中键是字符串，值是整数。

我想使用这些值来使用 jinja 动态构建 Html 表： 我想要的结果需要如下所示：

其中组件行、数量行和价格单位是根据组件数据字段中items_data的值自动生成的。

这是我迄今为止对 jinja 所做的尝试：

<table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Level</th>
                            <th>Item</th>
                            <th>Component</th>
                            <th>Qty</th>
                            <th>Price Unit</th>
                            <th>Price Total</th>
                            <th>Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item, components_data in prices.items() %}
                        <tr>
                            <td rowspan="3">{{item[1]}}</td>
                            <td rowspan="3">{{item[0]}}</td>
                        </tr>
                        {% for sub_components, sub_comp_dat in components_data.items_data.items()%}
                        <td>{{sub_components}}</td>
                        <td>{{ sub_comp_dat[0] }}</td>
                        <td>{{ sub_comp_dat[1] }}</td>
                        <td>{{ components_data.price_labor }}</td>
                        <td>{{ components_data.total }}</td>
                        </tr>
                        {% endfor %} {% endfor %}
                        <tr>
                            <td colspan="3" id='total-label'>Total</td>
                            <td colspan="4" id='total-value' text-align='right'>july</td>
                        </tr>
                    </tbody>
                </table>

结果如下所示：

我已经尝试了所有我知道的技巧，但无法获得预期的结果，欢迎提供任何帮助。 谢谢

Answer 1

我不知道 jinja 语法，但您可以轻松实现存储布尔值以检查总数是否已写入的目的。

例如：

 {% for item, components_data in prices.items() %}
    <tr>
        <td rowspan="3">{{item[1]}}</td>
        <td rowspan="3">{{item[0]}}</td>
    </tr>
    //set the flag to false
    isFirstTime = false
    {% for sub_components, sub_comp_dat in components_data.items_data.items()%}
        <td>{{sub_components}}</td>
        <td>{{ sub_comp_dat[0] }}</td>
        <td>{{ sub_comp_dat[1] }}</td>
        //show the price only the first time
        if( isFortTime)
        {
            isFistTime = true;
            <td rowspan="3">{{ components_data.price_labor }}</td>
            <td rowspan="3">{{ components_data.total }}</td>
        }
        </tr>
    {% endfor %} 
{% endfor %}

同样，这不是正确的语法，但您可以毫无问题地实现这一点。

---

文档：

Assign a variable in the template

If Statement

Answer 2

再次感谢 @Alessandro.Vegna answer 使用 if else 语句的直觉。

可以根据this answer使用命名空间来实现：在jinja 2.0中

这就是答案：

<tbody>
                        {% for item, components_data in prices.items() %}
                        <tr>
                            <td rowspan="3">{{item[1]}}</td>
                            <td rowspan="3">{{item[0]}}</td>
                        </tr>
                            {% set time = namespace(first=False) %}
                            {% for sub_components, sub_comp_dat in components_data.items_data.items() %}
                             <tr>
                            <td>{{sub_components}}</td>
                            <td>{{ sub_comp_dat[0] }}</td>
                            <td>{{ sub_comp_dat[1] }}</td>
                            {% if not time.first %}
                                {% set time.first = True %}
                            <td rowspan="3">{{ components_data.price_labor }}</td>
                            <td rowspan="3">{{ components_data.total }}</td>
                        {% endif %}
                        </tr>
                        {% endfor %} {% endfor %}
                        <tr>
                            <td colspan="3" id='total-label'>Total</td>
                            <td colspan="4" id='total-value' text-align='right'>july</td>
                        </tr>
                    </tbody>