代码之家 › 专栏 › 技术社区 › Alex B

创建引导可折叠的手风琴表行,以显示来自flask sqlalchemy占位符的动态内容

flask-sqlalchemy bootstrap-4 sqlite3 flask python-3.x

Alex B · 技术社区 · 6 年前

考虑下一个从 sqlite 数据库使用 flask sqlalchemy .

在本例中,假设数据是发票列表,单击每一行将打开一个 collapsible bootstrap accordion 单击发票的详细信息。

<table class="table table-hover" data-toggle="table">  
<thead>
    <tr>
        <th>Date</th>
        <th>Invoice</th>         
    </tr>
</thead>

<tbody>
<tr data-toggle="collapse" data-target="#accordion" class="clickable">
{% for inv in invoices %}
   <td>
      {{ inv.number }}
   </td>
</tr>
<tr>
   <td>
      <div id="accordion" class="collapse">
         {{ inv.data }}
      </div>
   </td>
</tr>
{% endfor %}
</body>
</table>

我认为问题在于data target=“#accordion”标记,它以折叠数据占位符的迭代为目标,而不是特定占位符本身。

你可以在这里看到一个例子 Twitter Bootstrap Use collapse.js on table cells [Almost Done] http://jsfiddle.net/whytheday/2Dj7Y/11/ 但同样,内容是静态的,而不是动态的。

解决方案是有一个与目标id匹配的“动态”数据目标标记,但我不知道如何做到这一点。

1 回复 | 直到 6 年前

Alex B 6 年前

要完成这项任务,你必须 将tr标签插入jinja循环 那么到您的tr标签和 动态id collapsible bootstrap accordions ; 所以每个 tr 标签将指向相应的手风琴。代码应该是这样的:

<tbody>
    {% for inv in invoices %}
        <tr data-toggle="collapse" data-target="#{{inv.number}}"  class="clickable">
            <td>
                {{ inv.number }}
            </td>
        </tr>
        <tr id="{{inv.number}}" class="no-border collapse">
            <td>
                <div>
                    {{ inv.data }}
                </div>
            </td>
        </tr>
    {% endfor %}
</tbody>

这里的想法是,由于发票号码是唯一的,您将与 唯一ID . 因此,每个属性你的 tr标签

以防万一

你会注意到我添加了这个类 no-border 第二 tr

<style type="text/css">
    .table>tbody>tr.no-border>td{
        border-top: none;
    }
</style>

推荐文章

Aaron Green · 我的python程序无法识别数据库的存在,即使它在那里

1 年前

danial · 如何在多个字符串的每个位置找到最频繁的字符

2 年前

Henry · 使用Python将json重新格式化为键值对

2 年前

eymentakak · json字典类型错误:字符串索引必须是整数

2 年前

Qubix · 从熊猫数据帧创建相对熵矩阵

2 年前

FÄÅ ÛÅ · 字典、列表和字符串

2 年前

OrbitDuster · 如何使用gmail api在python中打印gmail正文?

2 年前

guiguilecodeur · 如何删除我的词汇表中的重复元素

2 年前

Susheel P M · 这是关于if-else语句[关闭]

2 年前

Slartibartfast · 关于Python版本安装

2 年前