如何在 django 模板的引导程序中创建可折叠卡片？
Posted
技术标签:
【中文标题】如何在 django 模板的引导程序中创建可折叠卡片？【英文标题】：How to create collapsible cards in bootstrap in django template? 【发布时间】：2019-10-13 20:45:30 【问题描述】：我有一张包含动态内容的可折叠卡片的表格。我从bootstrap 获取的代码如下所示：
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</div>
</div>
问题
但是如你所见，每次折叠都是由multiCollapseExample1这个属性控制的。在我的 django 模板中，当我使用它时，单击任何关闭按钮时，只有第一张卡片会折叠，因为它的静态值为 1。我怎样才能给它一个动态值，以便每张卡片都能正确打开和关闭？我问的原因是因为我的代码非常复杂，并且从 views.py 函数返回了大约 10 多个参数，并且我正在迭代字典字典以以我想要的格式打印所有值。出于这个原因，我有大约 4-5 个嵌套的 for 循环，还有一个 if 语句检查 if 循环计数器是否与父循环计数器相同。我无法理解如何简单地解决这个问题。
这是我的实际完整代码：
<table class="table mb-0 table-striped loadingplan">
<thead>
<tr>
<th>ID</th>
<th>Vehicles</th>
<th>Gross Weight</th>
<th>Route</th>
<th>Route Distance</th>
<th>Route TAT</th>
<th>ETD</th>
<th>ETA</th>
<th></th>
<th>Action</th>
</tr>
</thead>
<tbody>
% for d,t,r,y,w,f in open_route_info %
% for k,v in open_trucks.items %
% if forloop.counter == forloop.parentloop.counter %
<td class="align-middle">YNT1151<br>
<small class="align-right"> f % Filled</small>
</td>
<td>
% for x in v %
% for y,z in x.items %
y.display_name
% endfor %
% endfor %
</td>
% for truck,value in v.items %
<td class="align-middle"> truck value <br>o
<a href="#">
<small>Download Loading Plan value.pk </small>
</a>
</td>
% endfor %
<td class="align-middle"> w KG</td>
<td class="align-middle"> k </td>
<td class="align-middle"> d KM</td>
<td class="align-middle"> t </td>
<td class="align-middle"> y </td>
<td class="align-middle"> scheduled_date </td>
<td class="align-middle">
<button class="btn" type="button" data-toggle="collapse"
data-target="#multiCollapseExample2" aria-expanded="false"
aria-controls="multiCollapseExample2"><img
src="% static 'img/cardopen.svg' %" ></button>
</td>
<td class="align-middle"><a href="#" class="btn btn-primary">Raise RFQ</a>
</td>
<tr class="collapse multi-collapse" id="multiCollapseExample2">
<td colspan="5">
<table class="table table-bordered">
<thead>
<tr>
<th>SKU ID</th>
<th>SKU Name</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
% for x in v %
% for y,z in x.items %
% for w in z %
<tr>
<td> w.name </td>
<td> w.pid </td>
<td> w.quantity </td>
</tr>
% endfor %
% endfor %
% endfor %
</tbody>
</table>
</td>
<td colspan="5" class="align-middle">
<div class="card card-body iframecard">
<iframe src=" r "></iframe>
</div>
</td>
</tr>
% endif %
% endfor %
% endfor %
</tbody>
</table>
我想要什么
我想要做的就是，将multiCollapseExample2 替换为与项目数长度相同的动态变量。我尝试在一个长度为项目数的列表上使用一个简单的循环，但它没有工作可能是因为 if 语句 % if forloop.counter == forloop.parentloop.counter %。
【问题讨论】：
【参考方案1】：看起来您可以使用 2 个 for 循环及其变量为您的卡片创建一个唯一 ID。 像
data-target="#multiCollapsedtkv"
其中 d,t 来自外部 for 循环，k,v 来自内部循环。
【讨论】：
哇，我想知道为什么我没有想到这一点。附言我可以只使用一个我知道也是唯一的参数。以上是关于如何在 django 模板的引导程序中创建可折叠卡片？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用引导程序和 for 循环在 django 中创建电影片段？