P62模态对话框弹出确认删除
{% 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>{{ 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 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="modal-content">
<div class="alert alert-danger alert-dismissible fade in" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4>Oh snap! You got an error!</h4>
<p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor
ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
</div>
</div>
</div>
{% endblock %}
{% block js %}
<script type="text/javascript">
$(function () {
bindBtnAddEvent();
bindBtnSaveEvent();
bindBtnDeleteEvent();
})
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');
})
}
</script>
{% endblock %}