бутстрап 4 рухнул (аккордеонный стол) в джанго - PullRequest
Новая
       6

бутстрап 4 рухнул (аккордеонный стол) в джанго

0 голосов
/ 24 сентября 2018

Я разместил код таблицы в шаблонах django, который генерируется динамически с использованием массива из views.py.Я добавил колонтитул bootstrap4, который запускается при нажатии кнопки шеврона.Однако он показывает ВСЕ скрытые свертки, а не только сворачиваемые данные для данной строки (см. Ниже img).

Я знаю, что могу динамически устанавливать идентификаторы, но мне не повезло, передав функции в атрибут data-target.

EXAMPLE

<table class="table table-hover">
    <thead class>
    <tr>
        <th style="width:5%"></th>
        <th>Sample</th>
        <th>Reference</th>
        <th>Cost</th>
        <th>Sum</th>
    </tr>
    </thead>

    <tbody>
    <div class="container" id="accordion">
        <div class="card">
            {% for r in result %}
                <tr>
                    <td>
                        <button type="button" class="fa fa-chevron-right rotate" data-toggle="collapse"
                                data-target="#demo" onclick="">
                        </button>
                    </td>

                    <td> {{ r.split.0 }}  </td> <!-- sample word -->
                    <td> {{ r.split.2 }}</td> <!-- ref word -->
                    <td> {{ r.split.4 }}</td> <!-- cost -->
                    <td> {{ r.split.3 }}</td> <!-- sum -->
                </tr>

                <tr>
                    <td id="demo" class="collapse" colspan="5" >

                        <!-- COLLAPSE CONTENT -->
                    </td>
                </tr>
            {% endfor %}
        </div>
    </div>
    </tbody>

</table>

Ответы [ 2 ]

0 голосов
/ 24 сентября 2018

Попытайтесь поместить контент, который вы хотите скрыть, в "СБРОС КОНТЕНТ".

вот так: 

<table class="table table-hover">
    <thead class>
    <tr>
        <th style="width:5%"></th>
        <th>Sample</th>
        <th>Reference</th>
        <th>Cost</th>
        <th>Sum</th>
    </tr>
    </thead>

    <tbody>
    <div class="container" id="accordion">
        <div class="card">
            {% for r in result %}
                <tr>
                    <td>
                        <button type="button" class="fa fa-chevron-right rotate" data-toggle="collapse"
                                data-target="#demo" onclick="">
                        </button>
                    </td>


                </tr>

                <tr>
                    <td id="demo" class="collapse" colspan="5" >

                     <td> {{ r.split.0 }}  </td> <!-- sample word -->
                    <td> {{ r.split.2 }}</td> <!-- ref word -->
                    <td> {{ r.split.4 }}</td> <!-- cost -->
                    <td> {{ r.split.3 }}</td> <!-- sum -->
                    </td>
                </tr>
            {% endfor %}
        </div>
    </div>
    </tbody>

</table>

Кстати, не забудьте Bootstrap CDN

0 голосов
/ 24 сентября 2018

«Кнопка переключателя» имеет следующий HTML-код: 

<button type="button" class="fa fa-chevron-right rotate" data-toggle="collapse"
        data-target="#demo">

, а содержимое для складывания выглядит следующим образом: 

<td id="demo" class="collapse">[...]</td>

Это нормально, каждая кнопка переключения отображает или скрывает все содержимое, которое может быть свернутона вашей странице, поскольку все эти элементы связаны с одним и тем же идентификатором #demo.

Необходимо убедиться, что идентификатор сворачиваемого содержимого является уникальным для всего документа, и убедиться, что соответствующая кнопка ссылается на один и тот же уникальныйЯ бы.Возможно, используйте ваш идентификатор результата (из контекстной переменной), чтобы сделать что-то вроде этого: 

<button type="button" class="fa fa-chevron-right rotate" data-toggle="collapse"
        data-target="#demo-{{ r.pk }}">

<td id="demo-{{ r.pk }}" class="collapse">[...]</td>

РЕДАКТИРОВАТЬ: Конечно, вы должны адаптировать его к ВАШИМ данным.В этом примере я представляю, что ваш список result содержит много экземпляров модели, поэтому в каждом результате r значение r.pk уникально.Если в вашем шаблоне results содержится что-то еще, вы должны убедиться, что из каждого значения извлекается уникальная строка str или int, чтобы исключить id, который вы пишете в свой HTML.

Возможно, это будет demo-{{ r.split.6 }} или demo-{{ r.a_unique_attr_in_my_object }} или demo-{{ r.slugify }}.

...