Question

我已经在Django模板中发布了表格的代码，该模板是使用views.py中的数组动态生成的。我添加了bootstrap4折叠，该折叠在单击人字形按钮时运行。但是，它显示了该给定行的所有隐藏折叠，而不是仅可折叠数据（请参见下面的img）。

我知道我可以动态设置ID，但是我没有运气将函数传递给“数据目标”属性。

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

Answer 1

“ toogle按钮”具有以下HTML代码：

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

，可折叠的内容如下：

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

通常每个切换按钮都会显示或隐藏页面中所有可折叠的内容，因为所有这些元素都与相同的#demo标识符相关。

您必须确保可折叠内容的ID在所有文档中都是唯一的，并确保相应的按钮引用相同的唯一ID。也许使用您的结果ID（来自上下文变量）来做类似的事情：

<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来统一写入HTML的id。

也许是demo-{{ r.split.6 }}或demo-{{ r.a_unique_attr_in_my_object }}或demo-{{ r.slugify }}。

Answer 2

尝试将要隐藏的内容放在“折叠内容”下。

像这样：

<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

bootstrap 4折叠（手风琴表）在Django

2 个答案: