Как создать коллапс, отображающий динамические данные, используя bootstrap и django - PullRequest
Новая
       24

Как создать коллапс, отображающий динамические данные, используя bootstrap и django

0 голосов
/ 27 сентября 2019

У меня есть проект django, который использует карты для отображения извлеченных данных из базы данных. Я хочу добавить коллапс внутри карты , но проблема в том, что, как только я попытался сделать цикл foreach для загрузки динамических данных, коллапс простоработать на одной карте, а не на всех.

Я знаю, что должен назначить идентификатор каждой карты для параметров href & aria-controls класса коллапса в начальной загрузке.

, но не знаю как.

это код карты. 

<!-- cards -->
<div class="container">
    <div class="row justify-content-center">
        {% for obj in object_list %}

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 col-xl-3 mb-5">

            <div class="p-2 my-flex-item">
                <div class="card innercardzoom">
                    <div class="inner">
                        <img src="{% static '/img/card/1.png'%}" class="card-img-top" alt="...">
                    </div>
                        <h5 class="card-header">
                            <a class="collapsed d-block" data-toggle="collapse" href="#table-collapsed" aria-expanded="true" aria-controls="collapse-collapsed" id="heading-collapsed">
                                <i class="fa fa-chevron-down pull-right"></i>
                                 Details
                            </a>
                            <a class="collapsed d-block" data-toggle="collapse" href="#collapse-collapsed" aria-expanded="true" aria-controls="collapse-collapsed" id="heading-collapsed">
                                <i class="fa fa-chevron-down pull-right"></i>
                                CONTENT
                            </a>

                        </h5>
                        <table class="card-body table-sm table table-hover text-right">
                            <tbody>
                                <tr>
                                    <td>ID</td>
                                    <td>{{ obj.0 }}</td>
                                </tr>
                                <tr>
                                    <td>FULL NAME</td>
                                    <td>{{ obj.1 }}</td>
                                </tr>
                                <tr>
                                    <td>Mothe NAME</td>
                                    <td>{{ obj.2 }}</td>
                                </tr>
                                <tr>
                                    <td>Title</td>
                                    <td>{{ obj.3 }}</td>
                                </tr>
                                 <tr>
                                    <td>ADDRESS</td>
                                    <td>{{ obj.5 }}</td>
                                </tr>

                            </tbody>
                        </table>
                        <div id="table-collapsed" class="collapse" aria-labelledby="heading-collapsed">
                            <table class="card-body table-sm table table-hover text-right">
                                <tbody>
                                    <tr>
                                        <td>NICKNAME</td>
                                        <td>{{ obj.4 }}</td>
                                    </tr> 
                                    <tr>
                                        <td>DOB</td>
                                        <td>{{ obj.5 }}</td>
                                    </tr> 
                                </tbody>
                            </table>
                        </div>
                        <div class="expand-Ontop">
                            <div class="expand-Ontop-Card">
                                <div id="collapse-collapsed" class="collapse" aria-labelledby="heading-collapsed">
                                    <div class="card-body text-center">
    text for test the display in the content-text for test the display in the content   text for test the display in the content-text for test the display in the content.
I have a table of these collapsible cards with dynamic content in them. ... python - How to create collapsible cards in bootstrap in django template? ... For that reason, I have about 4-5 nested for loops, and also an if statement which checks if the if looper ... I am not able to undertand how I can simple solve this problem.
                                    </div>
                                </div>
                                <footer class="card-footer card-footer-buttom text-center bg-info">
                                    <a href="#" type="button" class="btn btn-primary" data-toggle="modal" data-target="#popModel">details</a>
                                </footer>
                            </div>
                        </div>
                    </div>

            </div>
        </div>

        {% endfor %}

    </div>
</div>

1 Ответ

0 голосов
/ 27 сентября 2019

Проблема в том, что вы используете одинаковые атрибуты id для каждого элемента в цикле.Вам нужно использовать отдельный идентификатор каждый раз.Для этого вы можете добавить счетчик forloop, например div id="collapse-collapsed-{{ forloop.counter }}"

...