Jinja2模板中的模態窗口。 Flask

Question

目前我正在開發Web應用程序的歷史頁面。應用程序（寫在Flask上）在sqlite中保存歷史記錄，並通過SQLAlchemy與數據庫一起使用。它看起來如下：

正如你可以看到最新的細胞有大量的文字資料。

更重要的是，我想在歷史頁面上列出這些數據。現在我的代碼看起來是這樣的：

{% extends "_base.html" %} 

{% block content %} 

<div id="div1" class="col-md-3"> 
    <p><a href='/' class='btn btn-primary btn-block' role='button'><span class='glyphicon glyphicon-chevron-left'></span> Back</a></p> 
</div> 

<div class="bs-example col-md-12"> 
    <br> 
    <table class="table table-hover"> 
     <thead> 
      <tr> 
       <th>Task ID</th> 
       <th>Date</th> 
       <th>Host</th> 
       <th>User</th> 
       <th>Playbook</th> 
       <th>Log</th> 
      </tr> 
     </thead> 
     <tbody> 
     {% for history in histories %} 
      <tr> 
       <td>{{ history.task_id }}</td> 
       <td>{{ history.date.strftime("%d/%m/%y %H:%M") }} UTC</td> 
       <td>{{ history.hostname }}</td> 
       <td>{{ history.username }}</td> 
       <td>{{ history.playbook }}</td> 
       <td>{{ history.output }}</td> 
      </tr> 
     {% endfor %} 
     </tbody> 
    </table> 
</div> 

{% endblock %} 

它產生這樣的看法：

顯然，這看起來很難看，所以我決定通過隱藏按鈕此輸出（最後小區）與引導模塊窗口中，像這樣的

而在這一點上我有一個問題。我創建了下一個模板：

{% extends "_base.html" %} 

{% block content %} 

<div id="div1" class="col-md-3"> 
    <p><a href='/' class='btn btn-primary btn-block' role='button'><span class='glyphicon glyphicon-chevron-left'></span> Back</a></p> 
</div> 

<div class="bs-example col-md-12"> 
    <br> 
    <table class="table table-hover"> 
     <thead> 
      <tr> 
       <th>Task ID</th> 
       <th>Date</th> 
       <th>Host</th> 
       <th>User</th> 
       <th>Playbook</th> 
       <th>Log</th> 
      </tr> 
     </thead> 
     <tbody> 
     {% for history in histories %} 
      <tr> 
       <td>{{ history.task_id }}</td> 
       <td>{{ history.date.strftime("%d/%m/%y %H:%M") }} UTC</td> 
       <td>{{ history.hostname }}</td> 
       <td>{{ history.username }}</td> 
       <td>{{ history.playbook }}</td> 
       <td><button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myOutput">Output</button></td> 
      </tr> 
     {% endfor %} 
     </tbody> 
    </table> 
</div> 

<!-- Modal --> 
    <div class="modal fade" id="myOutput" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Modal Header</h4> 
     </div> 
     <div class="modal-body"> 
      <p>Some text in the modal.</p> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
     </div> 

    </div> 
    </div> 

{% endblock %} 

但我不知道如何將正確的輸出添加到每個模態窗口的主體。我是否需要在代碼中生成大量模態窗口，例如<div class="modal fade" id="myOutput1" role="dialog">,<div class="modal fade" id="myOutput2" role="dialog">等等？它會是正確的嗎？

Answer 1

我做到了這一點與下面的代碼：

{% extends "_base.html" %} 

{% block content %} 

<div id="div1" class="col-md-3"> 
    <p><a href='/' class='btn btn-primary btn-block' role='button'><span class='glyphicon glyphicon-chevron-left'></span> Back</a></p> 
</div> 

<div class="bs-example col-md-12"> 
    <br> 
    <table class="table table-hover"> 
     <thead> 
      <tr> 
       <th>Task ID</th> 
       <th>Date</th> 
       <th>Host</th> 
       <th>User</th> 
       <th>Playbook</th> 
       <th>Log</th> 
      </tr> 
     </thead> 
     <tbody> 
     {% for history in histories %} 
      <tr> 
       <td>{{ history.task_id }}</td> 
       <td>{{ history.date.strftime("%d/%m/%y %H:%M") }} UTC</td> 
       <td>{{ history.hostname }}</td> 
       <td>{{ history.username }}</td> 
       <td>{{ history.playbook }}</td> 
       <td><button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myOutput{{ history.task_id }}">Output</button></td> 
      </tr> 
     {% endfor %} 
     </tbody> 
    </table> 
</div> 

{% for history in histories %} 
<!-- Modal --> 
    <div class="modal fade" id="myOutput{{ history.task_id }}" role="dialog"> 
    <div class="modal-dialog modal-lg"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Task Output</h4> 
     </div> 
     <div class="modal-body"> 
      <p>{{ history.output }}</p> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
     </div> 

    </div> 
    </div> 
{% endfor %} 

{% endblock %} 

data-target在按鈕和id在模態窗口是基於task_id值動態生成的。我不知道這是否是最好的方式，但至少它是有效的。