我有一张这些可折叠卡片的表格,里面有动态内容。我从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 looper计数器是否与父级的循环计数器相同。我无法理解如何简单地解决这个问题。
这是我的实际完整代码:
<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' %}" alt="card open"></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 %}
,该循环无法正常工作。
答案 0 :(得分:1)
看起来您可以使用2个for循环及其变量为卡创建唯一的ID。
class Program2
{
static void Main(string[] args){
CallMain(args).Wait();
Console.ReadLine();
}
static async Task CallMain(string[] args){
var client = new MongoClient("mongodb://wwww:wwwww@localhost:27017/test");
var database = client.GetDatabase("test");
var collection = database.GetCollection<BsonDocument>("Collection1");
var collection2 = database.GetCollection<BsonDocument>("Collection2");
var options = new ChangeStreamOptions { FullDocument = ChangeStreamFullDocumentOption.Default};
var pipeline = new EmptyPipelineDefinition<ChangeStreamDocument<BsonDocument>>().Match("{ operationType: 'insert' }");
ThreadStart childref = new ThreadStart(() => CallToChildThread(collection,options,pipeline));
Thread childThread = new Thread(childref);
childThread.Start();
ThreadStart childref2 = new ThreadStart(() => CallToChildThread(collection2, options, pipeline));
Thread childThread2 = new Thread(childref2);
childThread2.Start();
}
public async static void CallToChildThread(IMongoCollection<BsonDocument> collection, ChangeStreamOptions options,
PipelineDefinition<ChangeStreamDocument<BsonDocument>, ChangeStreamDocument<BsonDocument>> pipeline){
using (var cursor = await collection.WatchAsync<ChangeStreamDocument<BsonDocument>>(pipeline, options))
{
await cursor.ForEachAsync(doc =>
{Console.WriteLine(doc.FullDocument);});
}
}
}
其中d,t来自外部for循环,而k,v来自内部循环。