以jinja格式构建一个html表格列表

时间:2018-04-26 12:39:06

标签: python html flask html-table jinja2

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

('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)}

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

我想使用这些值来使用jinja动态构建Html表: 我想要的结果需要看起来像这样: enter image description here

根据Componnents_data字段中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>

结果如下: enter image description here

我已经尝试过我所知道的每一个提示,但无法获得预期的结果,欢迎任何帮助。 谢谢

2 个答案:

答案 0 :(得分:1)

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

e.g:

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

答案 1 :(得分:0)

再次感谢@ 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>