创建Bootstrap可折叠手风琴表行，以显示烧瓶SQLAlchemy占位符中的动态内容 [英] Create Bootstrap collapsible accordion table rows that display dynamic content from flask sqlalchemy placeholders

问题描述

请考虑下表，该表使用flask和sqlalchemy迭代sqlite数据库中的数据.

Consider the following table which iterates data from an sqlite database using flask and sqlalchemy.

在此示例中，假设数据为发票清单，然后单击每一行会打开collapsible bootstrap accordion，其中包含有关所单击发票的更多信息.

Assume for this example that the data is a list of invoices and clicking on each row opens a collapsible bootstrap accordion whith further information for the clicked invoice.

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

这里的问题是，只有第一行是可单击的，单击它会打开所有行，而不是单个行，而我们希望能够单击每一行并专门显示该特定行的数据.

The problem here is that only the first row is clickable and clicking on it opens all the rows instead of just a single row whereas we would like to be able to click on each row and reveal the data for that specific row exclusively.

我认为问题在于data-target =#accordion"标签，该标签的目标是折叠数据占位符的迭代而不是特定占位符本身.

I think the problem is do to with the data-target="#accordion" tag which targets the iteration of the collapsed data placeholder instead of the specific placeholder itself.

您可以在此处查看示例 Twitter Bootstrap的使用在表格单元格[几乎完成] 上折叠[js]，在这里 http://jsfiddle.net/whytheday/2Dj7Y/11/，但是内容还是静态的，而不是动态的.

You can see an example here Twitter Bootstrap Use collapse.js on table cells [Almost Done] and here http://jsfiddle.net/whytheday/2Dj7Y/11/ but again the content is static and not dynamic.

解决方案是拥有一个与目标ID匹配的动态"数据目标标签，但我不知道该怎么做.

The solution would be to have a "dynamic" data-target tag which matches the target id but I have no idea how to do that.

推荐答案

要完成此任务，您必须将tr标签插入jinja循环，然后添加动态数据，将定位到您的tr标签，并将动态ID 定位到您所有的collapsible bootstrap accordions；因此，每个 tr 标签将指向相应的手风琴.代码如下所示:

To accomplish this task, you have to insert your tr tag into the jinja loop, then add a dynamic data-target to your tr tag and a dynamic id to all your collapsible bootstrap accordions; So each tr tag will point to the corresponding accordion. Here's what the code should look like:

<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标签的每个属性 data-target (它们也是动态生成的)都将指向相应的手风琴.

The idea here is that, since the invoice number is unique, you will have accordions with unique ids. Thus each attribute data-target of your tr tags (generated dynamically them too), will point to the corresponding accordion.

以防万一:

您会注意到，我在第二个 tr 块中添加了no-border类.这是在您不希望Bootstrap表有边框的情况下...这是相应的CSS:

you will notice that I added the class no-border to the second tr block. This is for the case where you would not want to have a border from Bootstrap tables... here is the corresponding css:

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

这篇关于创建Bootstrap可折叠手风琴表行，以显示烧瓶SQLAlchemy占位符中的动态内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！