299 lines
12 KiB
HTML
299 lines
12 KiB
HTML
{% extends 'layout.html' %}
|
||
|
||
{% block content %}
|
||
<div class="container">
|
||
<div style="margin-bottom:10px">
|
||
<a id="btnadd" class="btn btn-success" href="#">
|
||
<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
|
||
新建订单
|
||
</a>
|
||
</div>
|
||
<div class="panel panel-default">
|
||
<!-- Default panel contents -->
|
||
<div class="panel-heading">
|
||
<span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
|
||
部门列表
|
||
</div>
|
||
<!-- Table -->
|
||
<table class="table table-bordered">
|
||
<thead>
|
||
<tr>
|
||
<th>ID</th>
|
||
<th>订单ID</th>
|
||
<th>商品名称</th>
|
||
<th>价格</th>
|
||
<th>状态</th>
|
||
<th>用户</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{% for item in queryset %}
|
||
<tr>
|
||
<th>{{ item.id }}</th>
|
||
<th>{{ item.oid }}</th>
|
||
<td>{{ item.title }}</td>
|
||
<td>{{ item.price }}</td>
|
||
<td>{{ item.get_status_display }}</td>
|
||
<td>{{ item.user.username }}</td>
|
||
<td>
|
||
<!--在这里给删除按钮class属性增加值btnDelete，不能用id属性，不然只会对第1条记录有效果-->
|
||
<input order_id="{{ item.id }}" type="button" class="btn btn-primary btn-xs btnEdit"
|
||
value="修改">
|
||
<input order_id="{{ item.id }}" order_oid={{ item.oid }} type="button"
|
||
class="btn btn-danger btn-xs btnDelete" value="删除">
|
||
</td>
|
||
</tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<ul class="pagination">
|
||
{{ page_nav }}
|
||
</ul>
|
||
|
||
<!-- 新建 & 修改 订单的模态窗口 -->
|
||
<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">
|
||
<!-- novalidate 关闭浏览器的表单验证，用Django来控制检验 -->
|
||
<form id='saveForm'>
|
||
{% csrf_token %}
|
||
{% for field in form %}
|
||
<div class="form-group">
|
||
<label>{{ field.label }}</label>
|
||
{{ field }}<span class="error" style="color:#ff0000;"> {{ field.errors.0 }}</span>
|
||
</div>
|
||
{% endfor %}
|
||
{# <button type="submit" class="btn btn-primary">保存</button>#}
|
||
</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>
|
||
<!-- 删除订单的模态窗口 -->
|
||
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
||
<div class="modal-dialog" role="document">
|
||
<div class="alert alert-danger alert-dismissible fade in" role="alert">
|
||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
|
||
aria-hidden="true">×</span></button>
|
||
<h4>删除警告</h4>
|
||
<p style="margin: 20px 10px;" id="del_msg"></p>
|
||
<p style="text-align: right;">
|
||
<button id='confirm' 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">
|
||
|
||
// 定义全局变量，用于存储行ID给后端处理
|
||
var DELETE_ID
|
||
var EDIT_ID
|
||
|
||
// 页面加载完成后，执行
|
||
$(function () {
|
||
bindBtnaddEvent();
|
||
bindBtnSaveEvent();
|
||
bindBtnDeleteEvent();
|
||
bindBtnDeleteSureEvent();
|
||
bindBtnEditEvent();
|
||
})
|
||
|
||
// 新建 & 编辑 ->订单
|
||
// 新建和编辑共用一个模态窗口
|
||
function bindBtnaddEvent() {
|
||
$('#btnadd').click(function () {
|
||
// 清空对话框表单
|
||
$('#saveForm')[0].reset()
|
||
|
||
// 每次添加时，要将编辑行的全局变量置空
|
||
EDIT_ID = undefined
|
||
|
||
// 点击新建订单按钮
|
||
$('#myModal').modal('show')
|
||
$('#myModalLabel').text('新建订单')
|
||
})
|
||
}
|
||
|
||
// 订单编辑
|
||
function bindBtnEditEvent() {
|
||
$('.btnEdit').click(function () {
|
||
// 清空对话框表单
|
||
$('#saveForm')[0].reset()
|
||
|
||
// 获取当前行的订单ID
|
||
var order_id = $(this).attr('order_id')
|
||
EDIT_ID = order_id
|
||
// 发送ajax请求到后端，获取编辑行的数据
|
||
$.ajax({
|
||
url: '/order/detail/',
|
||
type: 'get',
|
||
data: {
|
||
nid: order_id,
|
||
},
|
||
dataType: 'JSON',
|
||
success: function (res) {
|
||
if (res.status) {
|
||
|
||
// 浏览器自动会为文本框添加一个id属性,格式为id_title
|
||
// 将返回的data字典通过循环赋值给各自的文本框（说明详见
|
||
$.each(res.data, function (name, value) {
|
||
$('#id_' + name).val(value)
|
||
})
|
||
|
||
// 点击修改订单按钮
|
||
$('#myModal').modal('show')
|
||
|
||
// 修改模态窗口的标题
|
||
$('#myModalLabel').text('修改订单')
|
||
{#console.log(res.data.title)#}
|
||
{#console.log(res.data.price)#}
|
||
{#console.log(res.data.status)#}
|
||
} else {
|
||
alert(res.error)
|
||
}
|
||
}
|
||
})
|
||
|
||
})
|
||
}
|
||
|
||
// 订单删除询问
|
||
function bindBtnDeleteEvent() {
|
||
$('.btnDelete').click(function () {
|
||
// 点击删除订单按钮
|
||
$('#myModal1').modal('show');
|
||
DELETE_ID = $(this).attr('order_id')
|
||
var oid = $(this).attr('order_oid')
|
||
$('#del_msg').text('你确定要删除订单ID为' + oid + '的商品吗？')
|
||
|
||
console.log(oid)
|
||
})
|
||
}
|
||
|
||
// 保存&修改订单
|
||
function bindBtnSaveEvent() {
|
||
$('#btnSave').click(function () {
|
||
// 每次先清除span标签内容
|
||
$('.error').empty()
|
||
|
||
//判断来源是新建还是修改
|
||
if (EDIT_ID) {
|
||
// 编辑订单
|
||
doEdit()
|
||
} else {
|
||
// 新建订单
|
||
doAdd()
|
||
}
|
||
})
|
||
}
|
||
|
||
// 保存ajax请求后端
|
||
function doAdd() {
|
||
$.ajax({
|
||
url: '/order/add/',
|
||
type: 'post',
|
||
data: $('#saveForm').serialize(),
|
||
dataType: 'JSON',
|
||
success: function (res) {
|
||
console.log(res)
|
||
if (res.status) {
|
||
// 清空表单 $('#saveForm')是jQuery对象加【0】后-> 变为DOM对象，才有reset方法
|
||
$('#saveForm')[0].reset();
|
||
$('#myModal').modal('hide');
|
||
location.reload();
|
||
} else {
|
||
// 不成功要返回错误信息,each循环
|
||
// 错误信息包括字段名,和错误信息
|
||
// 浏览器自动会为文本框添加一个id属性,格式为id_title
|
||
// 所以在循环读出错误信息时,拼接一个id属性
|
||
// .next()指的是在文本框标签后的第一个标签，也就指span标签，给它设置text()值
|
||
// msg是一个列表所以读出msg[0]
|
||
$.each(res.error_msg, function (name, msg) {
|
||
$('#id_' + name).next().text(msg[0])
|
||
})
|
||
}
|
||
|
||
},
|
||
|
||
})
|
||
}
|
||
|
||
// 编辑ajax请求后端
|
||
function doEdit() {
|
||
$.ajax({
|
||
url: '/order/edit/' + '?uid=' + EDIT_ID,
|
||
type: 'post',
|
||
data: $('#saveForm').serialize(),
|
||
dataType: 'JSON',
|
||
success: function (res) {
|
||
console.log(res)
|
||
if (res.status) {
|
||
// 清空表单 $('#saveForm')是jQuery对象加【0】后-> 变为DOM对象，才有reset方法
|
||
$('#saveForm')[0].reset();
|
||
$('#myModal').modal('hide');
|
||
location.reload();
|
||
} else {
|
||
if (res.tips) {
|
||
alert(res.tips);
|
||
} else {
|
||
// 不成功要返回错误信息,each循环
|
||
// 错误信息包括字段名,和错误信息
|
||
// 浏览器自动会为文本框添加一个id属性,格式为id_title
|
||
// 所以在循环读出错误信息时,拼接一个id属性
|
||
// .next()指的是在文本框标签后的第一个标签，也就指span标签，给它设置text()值
|
||
// msg是一个列表所以读出msg[0]
|
||
$.each(res.error_msg, function (name, msg) {
|
||
$('#id_' + name).next().text(msg[0])
|
||
})
|
||
}
|
||
}
|
||
},
|
||
})
|
||
}
|
||
|
||
// 确认删除订单
|
||
function bindBtnDeleteSureEvent() {
|
||
$('#confirm').click(function () {
|
||
$.ajax({
|
||
url: '/order/delete/',
|
||
type: 'get',
|
||
data: {
|
||
'nid': DELETE_ID,
|
||
},
|
||
dataType: 'JSON',
|
||
success: function (res) {
|
||
if (res.status) {
|
||
$('#myModal1').modal('hide');
|
||
// 每次删除完成后，将全局变量置0
|
||
DELETE_ID = 0;
|
||
location.reload();
|
||
} else {
|
||
alert('不可遇见原因，删除失败')
|
||
}
|
||
}
|
||
})
|
||
})
|
||
}
|
||
|
||
</script>
|
||
{% endblock %} |