Question

目前我正在处理网络应用程序的历史记录页面。 App（写在Flask上）在sqlite中保存历史记录，并通过SQLAlchemy与db一起使用。它看起来如下：

正如您在最新单元格中看到的那样，有很多文本数据。

更重要的是，我想在历史页面上列出这些数据。现在我的代码看起来像这样：

{% 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">等不同的ID生成大量模态窗口？它会是正确的吗？

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值动态生成的。我不知道这是否是最好的方式，但至少它是有效的。

Answer 2

秘密在于使用Jinja2来识别何时“调用”模态以及模态本身。

因此，在“呼叫”上，而不是仅在data-target =“＃myOutput”末尾添加Jinja2-> data-target =“＃myOutput {{history.task_id}}”“ < / strong>

在模式中，使用相同的名称标识，而不是：id =“ myOutput”，再次在末尾添加Jinja2-> id =“ myOutput {{history.task_id}} ” < / p>

Jinja2模板中的模态窗口。烧瓶

2 个答案: