订单管理
表结构设计
编辑myproject/app01/models.py
class Order(models.Model):
"""订单"""
oid = models.CharField(verbose_name="订单号", max_length=64)
title = models.CharField(verbose_name="名称", max_length=32)
price = models.IntegerField(verbose_name="价格")
status_choices = {
(1, "待支付"),
(2, "已支付"),
}
status = models.SmallIntegerField(verbose_name="状态", choices=status_choices, default=1)
admin = models.ForeignKey(verbose_name="管理员", to="Admin", on_delete=models.CASCADE)
生成数据库表
makemigrations migrate
添加订单管理，新建订单按钮
编写路由
myproject/myproject/urls.py
#1.导入order
from app01.views import depart, pretty, user, admin, account, task, order
#2.订单管理 path('order/list/', order.order_list),
创建视图函数文件myproject/app01/views/order.py
from django.shortcuts import render
def order_list(request):
return render(request, 'order_list.html')
创建HTML页面myproject/app01/templates/order_list.html
{% extends 'layout.html' %}
{% block content %}
<div class="container">
<div>
<input type="button" value="新建订单" class="btn btn-primary">
</div>
</div>
{% endblock %}
添加订单管理myproject/app01/templates/layout.html
<li><a href="/order/list/">订单管理</a></li>
浏览器查看一下吧
实现点击新建订单，给一个弹出框进行新建，而不是一个新的页面
先做一个弹出对话框
编辑myproject/app01/templates/order_list.html
{% extends 'layout.html' %}
{% block content %}
<div class="container">
<div>
{# <input type="button" value="新建订单" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> #}
{# data-toggle="modal" data-target="#myModal" 方法一：点击弹出对话框#}
{# 方法二 ：绑定事件 #}
<input id="btnAdd" type="button" value="新建订单" class="btn btn-primary" >
</div>
</div>
{# 新建订单（对话框） #}
<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">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
{% endblock %}
{% block js %}
<script type="text/javascript">
$(function (){
bindBtnAddEvent();
})
function bindBtnAddEvent(){
$("#btnAdd").click(function (){
//点击新建按钮，显示对话框
$('#myModal').modal('show');
});
}
</script>
{% endblock %}
看下效果吧
怎么在弹出的对话框中显示表单内容呢
使用ModelForm来实现吧
修改myproject/app01/views/order.py
from django.shortcuts import render
from app01 import models
from app01.utils.bootstrap import BootStrapModelForm
class OrderModelForm(BootStrapModelForm):
class Meta:
model = models.Order
fields = "__all__"
def order_list(request):
form = OrderModelForm()
return render(request, 'order_list.html', {'form': form})
编辑myproject/app01/templates/order_list.html
{% extends 'layout.html' %}
{% block content %}
<div class="container">
<div>
{# data-toggle="modal" data-target="#myModal" 方法一：点击弹出对话框#}
<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>
{# 新建订单（对话框） #}
<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">Modal title</h4>
</div>
<div class="modal-body">
<form id="formAdd">
<div class="clearfix">
{% for field in form %}
<div class="col-xs-6">
<div class="form-group" style="position: relative;margin-bottom: 20px">
<label>{{ field.label }}</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">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
{% endblock %}
{% block js %}
<script type="text/javascript">
$(function () {
bindBtnAddEvent();
})
function bindBtnAddEvent() {
$("#btnAdd").click(function () {
//点击新建按钮，显示对话框
$('#myModal').modal('show');
});
}
</script>
{% endblock %}
看一下效果吧
订单号一般在后台，不需要填写
排除订单号
修改myproject/app01/views/order.py
修改标题
编辑myproject/app01/templates/order_list.html
接下来做点击保存到数据库
编辑myproject/app01/templates/order_list.html
{% extends 'layout.html' %}
{% block content %}
<div class="container">
<div>
{# data-toggle="modal" data-target="#myModal" 方法一：点击弹出对话框#}
<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>
{# 新建订单（对话框） #}
<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-6">
<div class="form-group" style="position: relative;margin-bottom: 20px">
<label>{{ field.label }}</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>
{% endblock %}
{% block js %}
<script type="text/javascript">
$(function () {
bindBtnAddEvent();
bindBtnSaveEvent();
})
function bindBtnAddEvent() {
$("#btnAdd").click(function () {
//点击新建按钮，显示对话框
$('#myModal').modal('show');
});
}
function bindBtnSaveEvent() {
$("#btnSave").click(function () {
$.ajax({
url:"/order/add/",
type: "post",
data: $("#formAdd").serialize(),
dataType: "JSON",
success:function (res){
console.log(res);
}
})
});
}
</script>
{% endblock %}
添加路由myproject/myproject/urls.py
path('order/add/', order.order_add),
修改myproject/app01/views/order.py
from django.shortcuts import render
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
from app01 import models
from app01.utils.bootstrap import BootStrapModelForm
class OrderModelForm(BootStrapModelForm):
class Meta:
model = models.Order
# fields = "__all__"
exclude = ["oid"]
def order_list(request):
form = OrderModelForm()
return render(request, 'order_list.html', {'form': form})
@csrf_exempt
def order_add(request):
"""新建订单（Ajax请求）"""
form = OrderModelForm(data=request.POST)
if form.is_valid():
form.save()
return JsonResponse({"status": True})
return JsonResponse({"status": False, 'error': form.errors})
看下效果吧
怎样把错误信息显示在页面上呢
编辑myproject/app01/templates/order_list.html
function bindBtnSaveEvent() {
$("#btnSave").click(function () {
$.ajax({
url:"/order/add/",
type: "post",
data: $("#formAdd").serialize(),
dataType: "JSON",
success:function (res){
{#console.log(res);#}
if (res.status){
alert("创建成功");
}else {
//把错误信息显示在对话框中
$.each(res.error, function (name, errorList){
$("#id_"+name).next().text(errorList[0]);
})
}
}
})
});
}
成功
现在填写名称后，名称下的错误信息依然存在，怎么清除上一次的错误信息呢
编辑myproject/app01/templates/order_list.html
订单号不需要用户填写，直接新建保存到数据库订单号要么为空，要么报错，此时我们需要自己在后台随机生成一个订单号，跟用户输入的数据一起保存到数据库中
修改myproject/app01/views/order.py
import random
from datetime import datetime
from django.shortcuts import render
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
from app01 import models
from app01.utils.bootstrap import BootStrapModelForm
class OrderModelForm(BootStrapModelForm):
class Meta:
model = models.Order
# fields = "__all__"
exclude = ["oid"]
def order_list(request):
form = OrderModelForm()
return render(request, 'order_list.html', {'form': form})
@csrf_exempt
def order_add(request):
"""新建订单（Ajax请求）"""
form = OrderModelForm(data=request.POST)
if form.is_valid():
#额外增加一些不是用户输入的值（自己计算出来的）
form.instance.oid = datetime.now().strftime("%Y%m%d%H%M%S") + str(random.randint(1000,9999))
#保存到数据库中
form.save()
return JsonResponse({"status": True})
return JsonResponse({"status": False, 'error': form.errors})
这样就生成了一个订单号（年月日时分秒+随机数）
管理员选项不让选择了，实现排除 admin 管理员, 默认使用当前登录用户为管理员
修改myproject/app01/views/order.py
import random
from datetime import datetime
from django.shortcuts import render
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
from app01 import models
from app01.utils.bootstrap import BootStrapModelForm
class OrderModelForm(BootStrapModelForm):
class Meta:
model = models.Order
# fields = "__all__"
# 排除 oid 订单号,让系统自动生成
# 排除 admin 管理员, 默认使用当前登录用户为管理员
exclude = ["oid", "admin"]
def order_list(request):
form = OrderModelForm()
return render(request, 'order_list.html', {'form': form})
@csrf_exempt
def order_add(request):
"""新建订单（Ajax请求）"""
form = OrderModelForm(data=request.POST)
if form.is_valid():
#额外增加一些不是用户输入的值（自己计算出来的）
#增加oid订单号，动态变化的（年月日时分秒+随机数）
form.instance.oid = datetime.now().strftime("%Y%m%d%H%M%S") + str(random.randint(1000,9999))
#固定设置管理员ID，需要去session中获取
#设置当前登录用户为订单的管理员
form.instance.admin_id = request.session["info"]["id"]
#保存到数据库中
form.save()
return JsonResponse({"status": True})
return JsonResponse({"status": False, 'error': form.errors})
我们发现一个问题，点击保存后填写的数据依然存在，怎样清空填写的数据呢
创建成功时，我们需要清空表单数据，创建失败时，不需要清空
编辑myproject/app01/templates/order_list.html
//清空表单 $("#formAdd")是jQuery对象 --> $("#formAdd")[0] DOM对象
$("#formAdd")[0].reset();
此时，创建成功后点击确定，表单就被清空了
创建成功后我们的弹出对话框应该关闭，怎么实现呢
编辑myproject/app01/templates/order_list.html
//关闭对话框
$('#myModal').modal('hide');
此时创建成功后点击确定，对话框就隐藏了
订单列表及分页
修改myproject/app01/views/order.py
import random
from datetime import datetime
from django.shortcuts import render
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
from app01 import models
from app01.utils.bootstrap import BootStrapModelForm
from app01.utils.pagination import Pagination
class OrderModelForm(BootStrapModelForm):
class Meta:
model = models.Order
# fields = "__all__"
# 排除 oid 订单号,让系统自动生成
# 排除 admin 管理员, 默认使用当前登录用户为管理员
exclude = ["oid", "admin"]
def order_list(request):
queryset = models.Order.objects.all().order_by('-id')
page_object = Pagination(request, queryset)
form = OrderModelForm()
context = {
'form': form,
'queryset': page_object.page_queryset, # 分完页的数据
"page_string": page_object.html() # 生成的页码
}
return render(request, 'order_list.html', context)
@csrf_exempt
def order_add(request):
"""新建订单（Ajax请求）"""
form = OrderModelForm(data=request.POST)
if form.is_valid():
#额外增加一些不是用户输入的值（自己计算出来的）
#增加oid订单号，动态变化的（年月日时分秒+随机数）
form.instance.oid = datetime.now().strftime("%Y%m%d%H%M%S") + str(random.randint(1000,9999))
#固定设置管理员ID，需要去session中获取
#设置当前登录用户为订单的管理员
form.instance.admin_id = request.session["info"]["id"]
#保存到数据库中
form.save()
return JsonResponse({"status": True})
return JsonResponse({"status": False, 'error': form.errors})
编辑myproject/app01/templates/order_list.html
{% extends 'layout.html' %}
{% block content %}
<div class="container">
<div>
{# data-toggle="modal" data-target="#myModal" 方法一：点击弹出对话框#}
<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">
<!-- 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>订单号</th>
<th>名称</th>
<th>价格</th>
<th>状态</th>
<th>管理员</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for obj in queryset %}
<tr>
<th>{{ obj.id }}</th>
<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 class="btn btn-primary btn-xs" href="#">编辑</a>
<a class="btn btn-danger btn-xs" href="#">删除</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<ul class="pagination">
{{ page_string }}
</ul>
</div>
{# 新建订单（对话框） #}
<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-6">
<div class="form-group" style="position: relative;margin-bottom: 20px">
<label>{{ field.label }}</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>
{% endblock %}
{% block js %}
<script type="text/javascript">
$(function () {
bindBtnAddEvent();
bindBtnSaveEvent();
})
function bindBtnAddEvent() {
$("#btnAdd").click(function () {
//点击新建按钮，显示对话框
$('#myModal').modal('show');
});
}
function bindBtnSaveEvent() {
$("#btnSave").click(function () {
//清除错误信息
$(".error_msg").empty();
//向后台发送请求
$.ajax({
url: "/order/add/",
type: "post",
data: $("#formAdd").serialize(),
dataType: "JSON",
success: function (res) {
{#console.log(res);#}
if (res.status) {
alert("创建成功");
//清空表单 $("#formAdd")是jQuery对象 --> $("#formAdd")[0] DOM对象
$("#formAdd")[0].reset();
//关闭对话框
$('#myModal').modal('hide');
} else {
//把错误信息显示在对话框中
$.each(res.error, function (name, errorList) {
$("#id_" + name).next().text(errorList[0]);
})
}
}
})
});
}
</script>
{% endblock %}
看一下效果吧
插入数据后需要手动刷新，页面才能展示新输入的信息
怎样实现自动刷新呢
编辑myproject/app01/templates/order_list.html
//刷新页面
location.reload();
这样就完成自动刷新了
订单删除
目标:
实现点击删除按钮后,弹出确认删除的弹出框,确认后再进行删除
显示删除弹出框，点击取消，取消对话框，确认放在下面完成
编辑myproject/app01/templates/order_list.html
{% extends 'layout.html' %}
{% block content %}
<div class="container">
<div style="margin-bottom: 10px">
{# data-toggle="modal" data-target="#myModal" 方法一：点击弹出对话框#}
<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">
<!-- 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>订单号</th>
<th>名称</th>
<th>价格</th>
<th>状态</th>
<th>管理员</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for obj in queryset %}
<tr>
<th>{{ obj.id }}</th>
<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 class="btn btn-primary btn-xs" href="#">编辑</a>
{# <a class="btn btn-danger btn-xs" href="#">删除</a> #}
<input class="btn btn-danger btn-xs btn-delete" type="button" value="删除">
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<ul class="pagination">
{{ page_string }}
</ul>
</div>
<!-- 新建订单（对话框） -->
<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-6">
<div class="form-group" style="position: relative;margin-bottom: 20px">
<label>{{ field.label }}</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>
<!-- 删除订单（对话框） -->
<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 0;">删除后，所有关联数据都会被删除。</p>
<p style="text-align: right;">
<button type="button" class="btn btn-danger">确定</button>
<!-- data-dismiss="modal" 取消对话框 -->
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
</p>
</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 () {
//清除错误信息
$(".error_msg").empty();
//向后台发送请求
$.ajax({
url: "/order/add/",
type: "post",
data: $("#formAdd").serialize(),
dataType: "JSON",
success: function (res) {
{#console.log(res);#}
if (res.status) {
alert("创建成功");
//清空表单 $("#formAdd")是jQuery对象 --> $("#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 %}
看下效果吧
下面来实现点击确认，删除对应信息吧
下面是用 js 和 ajax的方式实现数据行的删除,注意下面的id与class绑定匹配, 例如:
$(".btn-delete")对应HTML中的class="btn-delete"位置
$("#btnConfirmDelete")对应HTML中的id="btnConfirmDelete"位置
编辑myproject/app01/templates/order_list.html
{% extends 'layout.html' %}
{% block content %}
<div class="container">
<div style="margin-bottom: 10px">
{# data-toggle="modal" data-target="#myModal" 方法一：点击弹出对话框#}
<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">
<!-- 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>订单号</th>
<th>名称</th>
<th>价格</th>
<th>状态</th>
<th>管理员</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for obj in queryset %}
<tr uid="{{ obj.id }}">
<th>{{ obj.id }}</th>
<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 class="btn btn-primary btn-xs" href="#">编辑</a>
{# <a class="btn btn-danger btn-xs" href="#">删除</a> #}
<input uid = "{{ obj.id }}" class="btn btn-danger btn-xs btn-delete" type="button" value="删除">
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<ul class="pagination">
{{ page_string }}
</ul>
</div>
<!-- 新建订单（对话框） -->
<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-6">
<div class="form-group" style="position: relative;margin-bottom: 20px">
<label>{{ field.label }}</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>
<!-- 删除订单（对话框） -->
<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 0;">删除后，所有关联数据都会被删除。</p>
<p style="text-align: right;">
<button id="btnConfirmDelete" type="button" class="btn btn-danger">确定</button>
<!-- data-dismiss="modal" 取消对话框 -->
<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 () {
//清除错误信息
$(".error_msg").empty();
//向后台发送请求
$.ajax({
url: "/order/add/",
type: "post",
data: $("#formAdd").serialize(),
dataType: "JSON",
success: function (res) {
{#console.log(res);#}
if (res.status) {
alert("创建成功");
//清空表单 $("#formAdd")是jQuery对象 --> $("#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');
//获取当前行的ID并赋值给全局变量
DELETE_ID = $(this).attr('uid');
});
}
function bindBtnConfirmDeleteEvent(){
$("#btnConfirmDelete").click(function (){
//点击确认删除按钮，将全局变量中设置的那个要删除ID发送到后台
$.ajax({
url: "/order/delete/",
type: "GET",
data: {
uid: DELETE_ID
},
dataType: "JSON",
success: function (res){
if (res.status){
//alert("删除成功");
//隐藏删除框
//$("#deleteModal").modal('hide');
//在页面上将当前一行数据删除（js）
//$("tr[uid='" + DELETE_ID + "']").remove();
//将要删除的id置空
//DELETE_ID = 0;
//刷新页面列表
location.reload();
}else {
//删除失败
alert(res.error);
}
}
})
});
}
</script>
{% endblock %}
location.reload(); 表示删除完成后,让页面自动刷新
它上面注释掉的那一段,可以实现删除后,让页面删除的那一行清除,但是会有一个问题,第二页的数据不会顶上来,也就是说当前页面有 10 行数据,我们删除一行后,只剩下 9 行数据,不会自动刷新
编辑myproject/myproject/urls.py
path('order/delete/', order.order_delete),
编辑myproject/app01/views/order.py
import random
from datetime import datetime
from django.shortcuts import render
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
from app01 import models
from app01.utils.bootstrap import BootStrapModelForm
from app01.utils.pagination import Pagination
class OrderModelForm(BootStrapModelForm):
class Meta:
model = models.Order
# fields = "__all__"
# 排除 oid 订单号,让系统自动生成
# 排除 admin 管理员, 默认使用当前登录用户为管理员
exclude = ["oid", "admin"]
def order_list(request):
queryset = models.Order.objects.all().order_by('-id')
page_object = Pagination(request, queryset)
form = OrderModelForm()
context = {
'form': form,
'queryset': page_object.page_queryset, # 分完页的数据
"page_string": page_object.html() # 生成的页码
}
return render(request, 'order_list.html', context)
@csrf_exempt
def order_add(request):
"""新建订单（Ajax请求）"""
form = OrderModelForm(data=request.POST)
if form.is_valid():
#额外增加一些不是用户输入的值（自己计算出来的）
#增加oid订单号，动态变化的（年月日时分秒+随机数）
form.instance.oid = datetime.now().strftime("%Y%m%d%H%M%S") + str(random.randint(1000,9999))
#固定设置管理员ID，需要去session中获取
#设置当前登录用户为订单的管理员
form.instance.admin_id = request.session["info"]["id"]
#保存到数据库中
form.save()
return JsonResponse({"status": True})
return JsonResponse({"status": False, 'error': form.errors})
#GET请求不需要加免除csrf认证
def order_delete(request):
"""删除订单"""
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})
浏览器看下吧
删除成功
订单编辑
编辑myproject/app01/templates/order_list.html
{% extends 'layout.html' %}
{% block content %}
<div class="container">
<div style="margin-bottom: 10px">
{# data-toggle="modal" data-target="#myModal" 方法一：点击弹出对话框#}
<input type="button" value="新建订单1" class="btn btn-success" data-toggle="modal" data-target="#myModal">
{# 方法二 ：绑定事件 #}
<input id="btnAdd" type="button" value="新建订单2" class="btn btn-success">
</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>订单号</th>
<th>名称</th>
<th>价格</th>
<th>状态</th>
<th>管理员</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for obj in queryset %}
<tr uid="{{ obj.id }}">
<th>{{ obj.id }}</th>
<td>{{ obj.oid }}</td>
<td>{{ obj.title }}</td>
<td>{{ obj.price }}</td>
<td>{{ obj.get_status_display }}</td>
<td>{{ obj.admin.username }}</td>
<td>
<input uid="{{ obj.id }}" type="button" class="btn btn-primary btn-xs btn-edit" value="编辑">
<input uid="{{ obj.id }}" class="btn btn-danger btn-xs btn-delete" type="button" value="删除">
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<ul class="pagination">
{{ page_string }}
</ul>
</div>
<!-- 新建/编辑 订单（对话框） -->
<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-6">
<div class="form-group" style="position: relative;margin-bottom: 20px">
<label>{{ field.label }}</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>
<!-- 删除订单（对话框） -->
<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 0;">删除后，所有关联数据都会被删除。</p>
<p style="text-align: right;">
<button id="btnConfirmDelete" type="button" class="btn btn-danger">确定</button>
<!-- data-dismiss="modal" 取消对话框 -->
<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;
var EDIT_ID;
$(function () {
bindBtnAddEvent();
bindBtnSaveEvent();
bindBtnDeleteEvent();
bindBtnConfirmDeleteEvent();
bindBtnEditEvent();
})
function bindBtnAddEvent() {
$("#btnAdd").click(function () {
// 将正在编辑的 ID 设置为空
EDIT_ID = undefined;
//清空对话框中的数据
$("#formAdd")[0].reset();
//设置对话框的标题
$("#myModalLabel").text("新建");
//点击新建按钮，显示对话框
$('#myModal').modal('show');
});
}
function bindBtnSaveEvent() {
$("#btnSave").click(function () {
//清除错误信息
$(".error_msg").empty();
if (EDIT_ID) {
//编辑
doEdit();
} else {
//添加
doAdd();
}
});
}
function doEdit() {
//向后台发送请求 （添加的Ajax请求）
$.ajax({
url: "/order/edit/" + "?uid=" + EDIT_ID,
type: "post",
data: $("#formAdd").serialize(),
dataType: "JSON",
success: function (res) {
{#console.log(res);#}
if (res.status) {
//alert("创建成功");
//清空表单 $("#formAdd")是jQuery对象 --> $("#formAdd")[0] DOM对象
$("#formAdd")[0].reset();
//关闭对话框
$('#myModal').modal('hide');
//刷新页面
location.reload();
} else {
if (res.tips) {
alert(res.tips);
} else {
//把错误信息显示在对话框中
$.each(res.error, function (name, errorList) {
$("#id_" + name).next().text(errorList[0]);
})
}
}
}
})
}
function doAdd() {
//向后台发送请求 （添加的Ajax请求）
$.ajax({
url: "/order/add/",
type: "post",
data: $("#formAdd").serialize(),
dataType: "JSON",
success: function (res) {
{#console.log(res);#}
if (res.status) {
alert("创建成功");
//清空表单 $("#formAdd")是jQuery对象 --> $("#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');
//获取当前行的ID并赋值给全局变量
DELETE_ID = $(this).attr('uid');
});
}
function bindBtnConfirmDeleteEvent() {
$("#btnConfirmDelete").click(function () {
//点击确认删除按钮，将全局变量中设置的那个要删除ID发送到后台
$.ajax({
url: "/order/delete/",
type: "GET",
data: {
uid: DELETE_ID
},
dataType: "JSON",
success: function (res) {
if (res.status) {
//alert("删除成功");
//隐藏删除框
//$("#deleteModal").modal('hide');
//在页面上将当前一行数据删除（js）
//$("tr[uid='" + DELETE_ID + "']").remove();
//将要删除的id置空
//DELETE_ID = 0;
//刷新页面列表
location.reload();
} else {
//删除失败
alert(res.error);
}
}
})
});
}
function bindBtnEditEvent() {
$(".btn-edit").click(function () {
//清空对话框中的数据
$("#formAdd")[0].reset();
var uid = $(this).attr("uid");
EDIT_ID = uid;
//发送 Ajax 去后台获取当前行的相关数据
$.ajax({
url: "/order/detail/",
type: "get",
data: {
uid: uid
},
dataType: "JSON",
success: function (res) {
if (res.status) {
console.log(res.data);
//将数据赋值到对话框中的标签中
$.each(res.data, function (name, value) {
$("#id_" + name).val(value);
})
//修改对话框的标题
$("#myModalLabel").text("编辑");
//编辑何新建的对话框一致的，所以用同一个就可以了，点击编辑按钮，显示对话框
$('#myModal').modal('show');
} else {
alert(res.error);
}
}
})
//默认在对话框中存在需要编辑的数据
});
}
</script>
{% endblock %}
在上面的代码中,进行了如下方面的操作:
- 编辑和新建订单共用一个对话框,使用
doEdit和doAdd进行区分 - 编辑页面中自动填充已有数据
- 编辑的js代码分为
bindBtnEditEvent()与doEdit() - 编辑对话框中保存时,需要考虑到当前的数据行是否存在
编辑myproject/app01/views/order.py
import random
from datetime import datetime
from django.shortcuts import render
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
from app01 import models
from app01.utils.bootstrap import BootStrapModelForm
from app01.utils.pagination import Pagination
class OrderModelForm(BootStrapModelForm):
class Meta:
model = models.Order
# fields = "__all__"
# 排除 oid 订单号,让系统自动生成
# 排除 admin 管理员, 默认使用当前登录用户为管理员
exclude = ["oid", "admin"]
def order_list(request):
queryset = models.Order.objects.all().order_by('-id')
page_object = Pagination(request, queryset)
form = OrderModelForm()
context = {
'form': form,
'queryset': page_object.page_queryset, # 分完页的数据
"page_string": page_object.html() # 生成的页码
}
return render(request, 'order_list.html', context)
@csrf_exempt
def order_add(request):
"""新建订单（Ajax请求）"""
form = OrderModelForm(data=request.POST)
if form.is_valid():
# 额外增加一些不是用户输入的值（自己计算出来的）
# 增加oid订单号，动态变化的（年月日时分秒+随机数）
form.instance.oid = datetime.now().strftime("%Y%m%d%H%M%S") + str(random.randint(1000, 9999))
# 固定设置管理员ID，需要去session中获取
# 设置当前登录用户为订单的管理员
form.instance.admin_id = request.session["info"]["id"]
# 保存到数据库中
form.save()
return JsonResponse({"status": True})
return JsonResponse({"status": False, 'error': form.errors})
# GET请求不需要加免除csrf认证
def order_delete(request):
"""删除订单"""
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})
def order_detail(request):
"""根据ID获取订单详细"""
"""
方式一
uid = request.GET.get("uid")
row_object = models.Order.objects.filter(id=uid).first()
if not row_object:
return JsonResponse({"status":False, 'error': "数据不存在"})
# 从数据库中获取到一个对象 row_object
result = {
"status": True,
"data": {
"title": row_object.title,
"price": row_object.price,
"status": row_object.status,
}
}
return JsonResponse(result)
"""
# 方式二
uid = request.GET.get("uid")
row_dict = models.Order.objects.filter(id=uid).values("title", "price", "status").first()
if not row_dict:
return JsonResponse({"status": False, 'error': "数据不存在"})
# 从数据库中获取到一个对象 row_object
result = {
"status": True,
"data": row_dict
}
return JsonResponse(result)
@csrf_exempt
def order_edit(request):
"""编辑订单"""
uid = request.GET.get("uid")
row_object = models.Order.objects.filter(id=uid).first()
if not row_object:
return JsonResponse({"status": False, "tips": "数据不存在，请刷新重试"})
# 获取编辑界面提交的数据
data = request.POST
# 判断编辑的内容是否跟以前一样
if data["title"] != '' and data['price'] != '' and data['status'] != '':
flag = 0
if row_object.title == data["title"]:
flag += 1
if row_object.price == int(data["price"]):
flag += 1
if row_object.status == int(data["status"]):
flag += 1
# 如果输入的内容与原有内容相同,则进行提示
if flag == 3:
return JsonResponse({"status": False, "tips": "您没有变更任何内容,无需修改!"})
form = OrderModelForm(data=request.POST, instance=row_object)
if form.is_valid():
form.save()
return JsonResponse({"status": True})
return JsonResponse({"status": False, "error": form.errors})
编辑myproject/myproject/urls.py
path('order/detail/', order.order_detail),
path('order/edit/', order.order_edit),
浙公网安备 33010602011771号