Jinja2模板中的模态窗口.烧瓶 [英] Modal window in Jinja2 template. Flask
问题描述
当前,我正在处理Web应用程序的历史记录页面.应用程序(在Flask上编写)将历史记录保存在sqlite中,并通过SQLAlchemy与db一起使用.它看起来如下:
Currently I am working on history page for web-application. App (written on Flask) saves history in sqlite and works with db through SQLAlchemy. It looks as follow:
您可以在最新的单元格中看到很多文本数据.
As you can see in latest cell there are a lot of text data.
更重要的是,我想在历史页面上列出这些数据.现在,我的代码如下:
More to the point, I want to list this data on history page. For now my code looks like this:
{% 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 %}
它产生这样的视图:
显然看起来很丑,所以我决定通过带有引导程序模块窗口的按钮隐藏此输出(最新单元格),就像这样
Obviously it looks ugly, so I've decided to hide this output (latest cell) via button with bootstrap module window, like this one
这时我遇到了问题.我创建了下一个模板:
And at this point I have a problem. I've created next template:
{% 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">
等)在代码中生成大量模态窗口?会正确吗?
But I have no clue how to add correct output to body of every modal window. Do I need to generate a lot of modal windows in code with different ids like <div class="modal fade" id="myOutput1" role="dialog">
, <div class="modal fade" id="myOutput2" role="dialog">
and so on? Will it be correct?
推荐答案
我已经完成了下一个代码:
I've done that with next code:
{% 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">×</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
值动态生成的.我不知道这是否是最好的方法,但至少能奏效.
data-target
in button and id
in modal window were generated dynamically based on task_id
value. I don't know if it's the best way but at least it works.
这篇关于Jinja2模板中的模态窗口.烧瓶的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!