涉及到一个弹出框的确认删除操作:
def order_del(request):
"""删除订单"""
from django.http import JsonResponse
uid = request.GET.get("uid")
exists = models.Order.objects.filter(id=uid).exists()
if not exists:
return JsonResponse({
"status": False,
"error": "删除失败,数据不存在",
})
models.Order.objects.filter(id=uid).delete()
return JsonResponse({
"status": True,
})
{% extends 'layout.html' %}
{% block content %}
<div class="container">
<div style="margin-bottom: 10px;">
<input type="button" value="新建订单1" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
<input id="btnAdd" type="button" value="新建订单2" class="btn btn-primary">
</div>
<div class="panel panel-default">
<div class="panel-heading">
<span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
管理员账户列表
</div>
<div class="panel-body">
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>订单号</th>
<th>名称</th>
<th>价格</th>
<th>状态</th>
<th>管理员</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for obj in queryset %}
<tr>
<td uid="{{ obj.id }}">{{ obj.id }}</td>
<td>{{ obj.oid }}</td>
<td>{{ obj.title }}</td>
<td>{{ obj.price }}</td>
<td>{{ obj.get_status_display }}</td>
<td>{{ obj.admin.username }}</td>
<td>
<a href="#" class="btn btn-primary btn-xs">编辑</a>
{# <a href="#" class="btn btn-danger btn-xs">删除</a>#}
<input uid="{{ obj.id }}" type="button" class="btn btn-danger btn-xs btn-delete" value="删除">
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
<!-- 新建Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">新建订单</h4>
</div>
<div class="modal-body">
<form id="formAdd">
<div class="clearfix">
{% for field in form %}
<div class="col-xs-12">
<div class="form-group" style="position: relative; margin-bottom: 20px;">
<label>
{{ field.label }}
<span style="color: red">{{ field.errors.0 }}</span>
</label>
{{ field }}
<span class="error_msg" style="color: red; position: absolute;"></span>
</div>
</div>
{% endfor %}
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button id="btnSave" type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
<!-- 删除Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="alert alert-danger alert-dismissible fade in" role="alert">
<h4>确认删除?</h4>
<p style="margin: 10px 0px">!!!此操作不可撤销,请谨慎操作</p>
<p>
<button id="btnConfirmDelete" type="button" class="btn btn-danger">确认删除</button>
<button type="button" class="btn btn-default" data-dismiss="modal">取消操作</button>
</p>
</div>
</div>
</div>
{% endblock %}
{% block js %}
<script type="text/javascript">
// 声明全局变量,用来做删除的确定
var DELETE_ID;
$(function () {
bindBtnAddEvent();
bindBtnSaveEvent();
bindBtnDeleteEvent();
bindBtnConfirmDeleteEvent();
})
function bindBtnAddEvent() {
$('#btnAdd').click(function () {
//点击新建按钮就显示对话框
$('#myModal').modal('show');
})
}
function bindBtnSaveEvent() {
$('#btnSave').click(function () {
{#alert("保存");#}
// 清除错误信息
$(".error_msg").empty();
$.ajax({
url: "/order_add/",
type: "post",
data: $("#formAdd").serialize(),
success: function (res) {
console.log(res);
if (res.status) {
alert("添加成功");
// 添加成功后清除原输入框中的数值
// $("#formAdd"),加上[0]变成dom对象
$("#formAdd")[0].reset();
// 关闭模态对话框
$('#myModal').modal('hide');
// 刷新页面
location.reload();
} else {
// 把错误信息显示在对话框中
$.each(res.error, function (name, errorList) {
$("#id_" + name).next().text(errorList[0]);
})
}
}
})
})
}
function bindBtnDeleteEvent() {
$('.btn-delete').click(function () {
{#alert("删除");#}
// 显示删除对话框
$('#deleteModal').modal('show');
var uid = $(this).attr("uid");
console.log(uid);
})
}
function bindBtnConfirmDeleteEvent() {
$('#btnConfirmDelete').click(function () {
// 将全局设置的要删除的id发送到后台
$.ajax({
url: "/order_del/",
type: "GET",
data: {
uid: DELETE_ID,
},
dataType: "JSON",
success: function(res){
if(res.status){
alert("删除成功");
$("#deleteModal").modal("hide");
DELETE_ID = 0;
// 重新刷新会回到第一页,也加重了服务器的压力
{#location.reload();#}
// 通过js删除
$(" tr[uid=' " + DELETE_ID + " '] ").remove();
$(" tr[uid=${DELETE_ID}] ").remove();
}else{
alert(res.error);
}
}
})
})
}
</script>
{% endblock %}