如何在Django模板的引导程序中创建可折叠卡?

时间:2019-05-28 10:30:39

标签: python django for-loop django-templates django-views

我有一张这些可折叠卡片的表格,里面有动态内容。我从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 %},该循环无法正常工作。

1 个答案:

答案 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来自内部循环。