目前我正在为web应用程序开发历史页面。App(写在烧瓶上)将历史记录保存在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">×</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 %}
但我不知道如何将正确的输出添加到每个模式窗口的主体。我需要用不同的id生成很多模式窗口吗,比如<div class="modal fade" id="myOutput1" role="dialog">
,<div class="modal fade" id="myOutput2" role="dialog">
等等?会正确吗?
我已经用下一个代码做到了:
根据
task_id
值动态生成按钮中的data-target
和模式窗口中的id
。我不知道这是不是最好的方法,但至少是可行的。秘诀是使用Jinja2来识别何时“调用”模态以及模态本身。
因此,在“call”中,不只是data target=“#myOutput”,而是在末尾添加Jinja2->;data target=“#myOutput{{history.task _id}}”
在模式中,用相同的名称标识,而不是: id="myOutput", add Jinja2 at the end again -> id="myOutput {{history.task\u id}}“
相关问题 更多 >
编程相关推荐