Создайте строки складной таблицы аккордеона Bootstrap, которые отображают динамическое содержимое из заполнителей sqlalchemy.

Question

Рассмотрим следующую таблицу, в которой итерируются данные из базы данных 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 Используйте collapse.js для ячеек таблицы [Почти выполнено] и здесь http://jsfiddle.net/whytheday/2Dj7Y/11/, но опять-таки содержимое статично, а не динамично.

Решением было бы иметь «динамический» тег цели данных, который соответствует целевому идентификатору, но я понятия не имею, как это сделать.

Answer 1

Чтобы выполнить эту задачу, вы должны вставить свой тег tr в цикл jinja , затем добавить динамическую цель данных к своему тегу tr и динамический идентификатор ко всем вашим 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>

Идея в том, что, поскольку номер счета-фактуры уникален, у вас будут аккордеоны с уникальными идентификаторами . Таким образом, каждый атрибут data-target ваших тегов tr (сгенерированный ими тоже динамически) будет указывать на соответствующий аккордеон.

Дополнительно на всякий случай :

вы заметите, что я добавил класс no-border во второй блок tr . Это для случая, когда вы не хотите иметь границу из таблиц Bootstrap ... вот соответствующий css:

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