我想将数据从数据表显示到模式 Bootstrap 。
示例:
Name | prenom | id |edit
example | test | 2 |button edit
按钮会将数据发送到模态以显示更新。
按钮代码:
<a class="btn btn-info" role="button" data-toggle="modal" data-form="{% url 'up' id=val.id }" data-target="#myEdit" >Edit</a>
模态代码:
<div class="modal fade" id="myEdit" role="dialog">
<div class="modal-dialog">
<form class="well contact-form" method="post" action="{% url
'up'}">
{% csrf_token %}
<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">
<label for="usr">Name:</label>
<input type="text" class="form-control" required="" name="uss" value="{{ instance.name }}" id="uss">
<label for="pwd">Password:</label>
<input type="password" class="form-control" required="" value="{{ instance.sname }}" name="pwd" id="pwd" >
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default">Valider</button>
<button value="" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</form>
</div>
</div>
View .py
def posts_edit(request, id=None):
instance = get_object_or_404(namemodel, id=id)
context={
'instance': instance
}
return render(request, '/ges/sortie/', context)
我想在模态中显示两个值Name
和prenom
,数据显示来自数据库。
我认为最好的解决方案是使用ajax。
最佳答案
您的模态代码包含一个表单
,但您询问如何显示一些数据,因此这让我有点困惑您真正想要做什么。请说得更清楚。
我假设您想要在模式
上显示一些数据,并且应该使用 AJAX 从服务器检索该数据。
有多种方法可以做到这一点。让我向您解释两个一般选项:
1。服务器处理的 HTML
在您的初始模板中,您只有一个空的 div
,您可以使用 HTML 代码对其进行更新。
每次您想要显示一些数据时,您都会执行一个 AJAX 请求它将返回 HTML 代码(在本例中为 modal
HTML 代码),然后您只需将其插入到您的div
。
2.客户端处理的 HTML
在您的初始模板中,您可能有 HTML 代码的骨架(在本例中为 modal
HTML 骨架),并且通过 javascript 您可以更新其中的一些值。
每次您想要显示一些数据时,您都会执行一个 AJAX 请求它可能会返回 JSON 数据,并使用该信息更新 HTML 框架中的值。
<小时/>差异
使用第一个意味着在后端编写更多代码(本例中为 Django 模板),而后者鼓励您在前端编写更多 javascript 代码。
由于在服务器端渲染模板的速度相当慢,并且传输的数据也较大(所有 HTML 代码通常比原始 JSON 数据包含更多字节),前一个选项可能会慢一些。无论如何,我相信对于这个简单的情况,这种差异是不相关的。
<小时/>代码
由于我更喜欢在后端工作而不是编写太多 JavaScript,因此以下解决方案将是服务器处理的 HTML 的实现。这是(顺便说一句,你已经非常接近了):
您的主模板:
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Prenom</th>
<th>ID</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ val.name }}</td>
<td>{{ val.prenom }}</td>
<td>{{ val.id }}</td>
<td><a class="btn btn-info" class="open-modal" data-url="{% url 'up' id=val.id }">Edit</a></td>
</tr>
<tr>
...
</tr>
...
</tbody>
</table>
<!-- Here we create this empty div for inserting modal -->
<div id="modal-div"></div>
主模板中的Javacript:
var modalDiv = $("#modal-div");
$(".open-modal").on("click", function() {
$.ajax({
url: $(this).attr("data-url"),
success: function(data) {
modalDiv.html(data);
$("#myEdit").modal();
}
});
});
这里重要的是我们有我们的按钮和一个当有人点击它时触发的 jQuery 事件。触发的函数执行 AJAX 调用,在 modal-div
中设置返回的 HTML,最后打开全新的模态。
您的 Controller (Django View ):
def posts_edit(request, id=None):
instance = get_object_or_404(namemodel, id=id)
context={
'instance': instance
}
return render(request, 'modal.html', context)
您的模态模板modal.html
<div class="modal fade" id="myEdit" role="dialog">
<div class="modal-dialog">
<form class="well contact-form" method="post" action="{% url 'up'}">
{% csrf_token %}
<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">
<label for="usr">Name:</label>
<input type="text" class="form-control" required="" name="uss" value="{{ instance.name }}" id="uss">
<label for="pwd">Password:</label>
<input type="password" class="form-control" required="" value="{{ instance.sname }}" name="pwd" id="pwd" >
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default">Valider</button>
<button value="" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</form>
</div>
</div>
关于python - 将数据从数据表传递到模态 django,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45310054/