目录
0、订单-表结构的设计
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
查看数据库
1、订单-弹出对话框
urls.py
from app01.views import depart, user, pretty, admin, account, task, order
# ------------------订单管理---------------------------------------------------
path('order/list/', order.order_list),
对话框插件
order.py
from django.shortcuts import render
def order_list(request):
"""订单列表"""
return render(request,"order_list.html")
order_list.html
{
% extends 'template.html' %}
{
% block content %}
<div class="container">
<div>
<!--方法1属性绑定-->
<input type="button" value="新建订单1" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
<!--方法2Ajax绑定-->
<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">
...
</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 %}
当前页面
两个按钮代表两种不同的方式弹出对话框。
2、订单-Ajax添加对话框
urls.py
# ------------------订单管理---------------------------------------------------
path('order/list/', order.order_list),
path('order/add/', order.order_add),
order.py
import random
from datetime import datetime
from django.http import JsonResponse
from django.shortcuts import render
from app01.utils.form import OrderModelForm
from django.views.decorators.csrf import csrf_exempt
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():
#{'title': ['12123'], 'price': ['-1'], 'status': ['1'], 'admin': ['1']}
#print(form.cleaned_data)
#自动生成随机订单号
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})
form.py
class OrderModelForm(BootStrapModelForm):
class Meta:
model = models.Order
#fields = '__all__'
exclude = ["oid"]
order_list.html
{
% extends 'template.html' %}
{
% block content %}
<div class="container">
<div>
<!--方法1属性绑定-->
<input type="button" value="新建订单1" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
<!--方法2Ajax绑定-->
<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">x新建</h4>
</div>
<div class="modal-body">
<form id="formAdd">
<div class="clearfix"><!--与栅格连用-->
{
% for obj in form %}
<div class="col-xs-6"><!--栅格为6-->
<div class="form-group" style="position: relative;margin-bottom: 20px;">
<label> {
{
obj.label }} </label>
{
{
obj }}
<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 () {
//点击保存按钮,保存订单
//alert("保存成功!");
//清除错误信息(jQuery锁定位置)
$(".error-msg").empty();
//向后台发送请求
$.ajax({
url:"/order/add/",
type:"post",
data:$("#formAdd").serialize(),
dataTypes:"JSON",
success:function (res){
if(res.status){
alert("保存成功!");
}else {
//alert("保存失败!");
//显示错误信息
$.each(res.error,function (name,errorList){
$("#id_"+name).next().text(errorList[0]);
})
}
}
})
});
}
</script>
{
% endblock %}
**Ajax添加错误信息提示的方法
拼接字符串使用jQuery找到前端错误提示的标签,写入错误信息的内容:
代码:
页面访问:
数据库
3、订单-Ajax数据提交
去session中获取当前登录的用户id
这样就可以在生成订单时,默认设置保存订单的管理员了。
order.py
改进一下对话框
可以清空和关闭
测试网页
当前登录用户ck,id = 10
创建订单后,数据一致
4、订单-Ajax显示订单列表
order.by
import random
from datetime import datetime
from django.http import JsonResponse
from django.shortcuts import render
from app01.utils.form import OrderModelForm
from django.views.decorators.csrf import csrf_exempt
from app01 import models
from app01.utils.pagination import Pagination
def order_list(request):
"""订单列表"""
queryset = models.Order.objects.all().order_by("-oid")
form = OrderModelForm()
page_object = Pagination(request, queryset)
# 参数字典
context = {
"queryset": page_object.page_queryset, # 分完页的数据
"page_string": page_object.html(), # 生成的页码
"form":form,
}
return render(request,"order_list.html",context)
@csrf_exempt
def order_add(request):
"""新建订单(Ajax请求)"""
form = OrderModelForm(data = request.POST)
if form.is_valid():
#{'title': ['12123'], 'price': ['-1'], 'status': ['1'], 'admin': ['1']}
#print(form.cleaned_data)
#自动生成随机订单号
form.instance.oid = datetime.now().strftime("%Y%m%d%H%M%S")+str(random.randint(1000,9999))
#固定订单管理员为当前登录的管理员(去session中获取)
form.instance.admin_id = request.session["info"]["id"]
#保存到数据库
form.save()
return JsonResponse({
"status":True})
return JsonResponse({
"status":False,"error":form.errors})
order_list.html
{
% extends 'template.html' %}
{
% block content %}
<div class="container">
<div style="margin-bottom: 10px">
<!--方法1属性绑定-->
<input type="button" value="新建订单1" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
<!--方法2Ajax绑定-->
<input id="btnAdd" type="button" value="新建订单2" class="btn btn-primary">
</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 obj in form %}
<div class="col-xs-6"><!--栅格为6-->
<div class="form-group" style="position: relative;margin-bottom: 20px;">
<label> {
{
obj.label }} </label>
{
{
obj }}
<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="panel panel-default">
<div class="panel-heading">
<span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
订单列表
</div>
<table class="table table-bordered">
<thead>
<th>ID</th>
<th>订单号</th>
<th>标题</th>
<th>价格</th>
<th>状态</th>
<th>管理员</th>
<th>操作</th>
</thead>
<tbody>
{
% for query in queryset %}
<tr>
<th>{
{
query.id }}</th>
<td>{
{
query.oid }}</td>
<td>{
{
query.title }}</td>
<td>{
{
query.price }}</td>
<td>{
{
query.get_status_display }}</td>
<td>{
{
query.admin.username }}</td>
<td>
<a class="btn btn-primary btn-xs" href="/admin/{
{ query.id }}/edit/">编辑</a>
<!--<a class="btn btn-danger btn-xs" href="/admin/delete/?nid={ qurey.id }">删除</a>-->
<a class="btn btn-danger btn-xs" href="/admin/{
{ query.id }}/delete/">删除</a>
</td>
</tr>
{
% endfor %}
</tbody>
</table>
<ul class="pagination">
{
{
page_string }}
</ul>
</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 () {
//点击保存按钮,保存订单
//alert("保存成功!");
//清除错误信息(jQuery锁定位置)
$(".error-msg").empty();
//向后台发送请求
$.ajax({
url: "/order/add/",
type: "post",
data: $("#formAdd").serialize(),
dataTypes: "JSON",
success: function (res) {
if (res.status) {
alert("保存成功!");
//清空表单
$("#formAdd")[0].reset();
//关闭对话框
$("#myModal").modal('hide')
//用JS实现页面刷新
location.reload();
} else {
//alert("保存失败!");
//显示错误信息
$.each(res.error, function (name, errorList) {
$("#id_" + name).next().text(errorList[0]);
})
}
}
})
});
}
</script>
{
% endblock %}
访问页面
5、订单-Ajax删除订单
修改删除按钮的标签和属性
创建绑定函数
绑定带有btn-delete属性的按钮
创建删除对话框
order_list.html
删除对话框:
<!-- 删除订单(对话框) -->
<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 10px;">删除后,所有相关联的数据都会被删除。</br>请点击下方按钮进行选择:</p>
<p style="text-align: right">
<button type="button" class="btn btn-danger">确 定</button>
<button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
</ps>
</div>
</div>
</div>
显示删除对话框函数:
function bindBtnDeleteEvent() {
$(".btn-delete").click(function () {
//alert("点击了删除");
//显示删除对话框
$("#deleteModal").modal("show");
})
}
效果
将要删除的订单id传给后台
定义全局变量
给删除按钮标签添加删除属性
在点击事件函数中获取uid
可以看到已经成功获取
赋值
下面就进行将DELETE_ID传递到后台的操作:
在删除订单的确定按钮标签中添加一个id
给tr添加一个uid
创建一个新的函数传递参数
编写函数
urls.py
# ------------------订单管理---------------------------------------------------
path('order/list/', order.order_list),
path('order/add/', order.order_add),
path('order/delete/', order.order_delete),
order.py
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})
order_list.py
{
% extends 'template.html' %}
{
% block content %}
<div class="container">
<div style="margin-bottom: 10px">
<!--方法1属性绑定-->
<input type="button" value="新建订单1" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
<!--方法2Ajax绑定-->
<input id="btnAdd" type="button" value="新建订单2" class="btn btn-primary">
</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 obj in form %}
<div class="col-xs-6"><!--栅格为6-->
<div class="form-group" style="position: relative;margin-bottom: 20px;">
<label> {
{
obj.label }} </label>
{
{
obj }}
<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 10px;">删除后,所有相关联的数据都会被删除。</br>请点击下方按钮进行选择:</p>
<p style="text-align: right">
<button id="btnConfirmDelete" type="button" class="btn btn-danger">确 定</button>
<button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
</ps>
</div>
</div>
</div>
<!--订单列表-->
<div class="panel panel-default">
<div class="panel-heading">
<span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
订单列表
</div>
<table class="table table-bordered">
<thead>
<th>ID</th>
<th>订单号</th>
<th>标题</th>
<th>价格</th>
<th>状态</th>
<th>管理员</th>
<th>操作</th>
</thead>
<tbody>
{
% for query in queryset %}
<tr uid="{
{ query.id }}">
<th>{
{
query.id }}</th>
<td>{
{
query.oid }}</td>
<td>{
{
query.title }}</td>
<td>{
{
query.price }}</td>
<td>{
{
query.get_status_display }}</td>
<td>{
{
query.admin.username }}</td>
<td>
<a class="btn btn-primary btn-xs" href="#">编辑</a>
<input uid="{
{ query.id }}" class="btn btn-danger btn-xs btn-delete" type="button"
value="删除">
</td>
</tr>
{
% endfor %}
</tbody>
</table>
<ul class="pagination">
{
{
page_string }}
</ul>
</div>
</div>
{
% endblock %}
{
% block js %}
<script type="text/javascript">
//定义全局变量存储被删除的订单id
var DELETE_ID;
$(function () {
bindBtnAddEvent();
bindBtnSaveEvent();
bindBtnDeleteEvent();
bindbtnConfirmDelete();
})
function bindBtnAddEvent() {
$("#btnAdd").click(function () {
//点击新建按钮,显示对话框
$('#myModal').modal('show');
});
}
function bindBtnSaveEvent() {
$("#btnSave").click(function () {
//点击保存按钮,保存订单
//alert("保存成功!");
//清除错误信息(jQuery锁定位置)
$(".error-msg").empty();
//向后台发送请求
$.ajax({
url: "/order/add/",
type: "post",
data: $("#formAdd").serialize(),
dataTypes: "JSON",
success: function (res) {
if (res.status) {
alert("保存成功!");
//清空表单
$("#formAdd")[0].reset();
//关闭对话框
$("#myModal").modal('hide')
//用JS实现页面刷新
location.reload();
} else {
//alert("保存失败!");
//显示错误信息
$.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
DELETE_ID = $(this).attr("uid");
})
}
//btnConfirmDelete
function bindbtnConfirmDelete() {
$("#btnConfirmDelete").click(function () {
//点击确定按钮,将全局变量中设置的DELETE_ID发送到后台
$.ajax({
url: "/order/delete/",//order/delete/?uid=XXX
type: "GET",
data: {
uid: DELETE_ID
},
dataTypes: "JSON",
success: function (res) {
if (res.status) {
//alert("删除成功!");
//隐藏删除对话框
$("#deleteModal").modal("hide");
//1、为了减轻服务器压力,此处用js在页面上删除当前一行数据
//$("tr[uid='"+DELETE_ID+"']").remove();
//全局变量置空
DELETE_ID = 0;
//2、显示当前数据(服务器压力较大)
location.reload()
} else {
alert(res.error);
}
}
})
})
}
</script>
{
% endblock %}
访问页面
6、订单-Ajax编辑订单
知识点补充:
urls.py
# ------------------订单管理---------------------------------------------------
path('order/list/', order.order_list),
path('order/add/', order.order_add),
path('order/delete/', order.order_delete),
path('order/detail/', order.order_detail),
order.py
def order_detail(request):
"""根据id获取订单详情"""
# 方法1
"""
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)
"""
# 方法2
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': "删除失败,数据不存在。"})
result = {
"status":True,
"data":row_dict,
}
return JsonResponse(result)
order_list.html
{
% extends 'template.html' %}
{
% block content %}
<div class="container">
<div style="margin-bottom: 10px">
<!--方法1属性绑定-->
<input type="button" value="新建订单1" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
<!--方法2Ajax绑定-->
<input id="btnAdd" type="button" value="新建订单2" class="btn btn-primary">
</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 obj in form %}
<div class="col-xs-6"><!--栅格为6-->
<div class="form-group" style="position: relative;margin-bottom: 20px;">
<label> {
{
obj.label }} </label>
{
{
obj }}
<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 10px;">删除后,所有相关联的数据都会被删除。</br>请点击下方按钮进行选择:</p>
<p style="text-align: right">
<button id="btnConfirmDelete" type="button" class="btn btn-danger">确 定</button>
<button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
</ps>
</div>
</div>
</div>
<!--订单列表-->
<div class="panel panel-default">
<div class="panel-heading">
<span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
订单列表
</div>
<table class="table table-bordered">
<thead>
<th>ID</th>
<th>订单号</th>
<th>标题</th>
<th>价格</th>
<th>状态</th>
<th>管理员</th>
<th>操作</th>
</thead>
<tbody>
{
% for query in queryset %}
<tr uid="{
{ query.id }}">
<th>{
{
query.id }}</th>
<td>{
{
query.oid }}</td>
<td>{
{
query.title }}</td>
<td>{
{
query.price }}</td>
<td>{
{
query.get_status_display }}</td>
<td>{
{
query.admin.username }}</td>
<td>
<input uid="{
{ query.id }}" class="btn btn-primary btn-xs btn-edit" type="button"
value="编辑">
<input uid="{
{ query.id }}" class="btn btn-danger btn-xs btn-delete" type="button"
value="删除">
</td>
</tr>
{
% endfor %}
</tbody>
</table>
<ul class="pagination">
{
{
page_string }}
</ul>
</div>
</div>
{
% endblock %}
{
% block js %}
<script type="text/javascript">
//定义全局变量存储被删除的订单id
var DELETE_ID;
$(function () {
bindBtnAddEvent();
bindBtnSaveEvent();
bindBtnDeleteEvent();
bindBtnEditEvent();
bindbtnConfirmDelete();
})
function bindBtnAddEvent() {
$("#btnAdd").click(function () {
//清空对话框中的默认数据
$("#formAdd")[0].reset();
//修改对话框标题
$("#myModalLabel").text("新建");
//点击新建按钮,显示对话框
$('#myModal').modal('show');
});
}
function bindBtnSaveEvent() {
$("#btnSave").click(function () {
//点击保存按钮,保存订单
//alert("保存成功!");
//清除错误信息(jQuery锁定位置)
$(".error-msg").empty();
//向后台发送请求
$.ajax({
url: "/order/add/",
type: "post",
data: $("#formAdd").serialize(),
dataTypes: "JSON",
success: function (res) {
if (res.status) {
alert("保存成功!");
//清空表单
$("#formAdd")[0].reset();
//关闭对话框
$("#myModal").modal('hide')
//用JS实现页面刷新
location.reload();
} else {
//alert("保存失败!");
//显示错误信息
$.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
DELETE_ID = $(this).attr("uid");
})
}
//btnConfirmDelete
function bindbtnConfirmDelete() {
$("#btnConfirmDelete").click(function () {
//点击确定按钮,将全局变量中设置的DELETE_ID发送到后台
$.ajax({
url: "/order/delete/",//order/delete/?uid=XXX
type: "GET",
data: {
uid: DELETE_ID
},
dataTypes: "JSON",
success: function (res) {
if (res.status) {
//alert("删除成功!");
//隐藏删除对话框
$("#deleteModal").modal("hide");
//1、为了减轻服务器压力,此处用js在页面上删除当前一行数据
//$("tr[uid='"+DELETE_ID+"']").remove();
//全局变量置空
DELETE_ID = 0;
//2、显示当前数据(服务器压力较大)
location.reload()
} else {
alert(res.error);
}
}
})
})
}
function bindBtnEditEvent() {
$(".btn-edit").click(function () {
//.是属性里的,#是id赋值的
//清空对话框中的默认数据
$("#formAdd")[0].reset();
//获取当前订单的id
var uid = $(this).attr("uid");
//发送Ajax去后端获取当前行的相关数据
$.ajax({
url: "/order/detail/",
type: "get",
data: {
uid: uid,
},
dataTypes: "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 %}
访问页面
7、订单-对话框逻辑调整(修改编辑bug)
因为编辑和添加用的是同一个表单,在编辑时点击保存,表单会提交到之前添加函数中去(order_add),结果导致,在数据库中新加了一个编辑后的数据,
下面就来修改这个bug
新建全局变量
点击编辑时给全局变量赋值
EDIT_ID全局变量赋值后,在新建时值依旧存在,所以在新建时先将EDIT_ID置空
So,当前的逻辑是:
我们点击新建时EDIT_ID为undefined,点击编辑时为对应值
根据EDIT_ID的不同值进行判断
order_list.html
{
% extends 'template.html' %}
{
% block content %}
<div class="container">
<div style="margin-bottom: 10px">
<!--方法1属性绑定-->
<input type="button" value="新建订单1" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
<!--方法2Ajax绑定-->
<input id="btnAdd" type="button" value="新建订单2" class="btn btn-primary">
</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 obj in form %}
<div class="col-xs-6"><!--栅格为6-->
<div class="form-group" style="position: relative;margin-bottom: 20px;">
<label> {
{
obj.label }} </label>
{
{
obj }}
<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 10px;">删除后,所有相关联的数据都会被删除。</br>请点击下方按钮进行选择:</p>
<p style="text-align: right">
<button id="btnConfirmDelete" type="button" class="btn btn-danger">确 定</button>
<button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
</ps>
</div>
</div>
</div>
<!--订单列表-->
<div class="panel panel-default">
<div class="panel-heading">
<span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
订单列表
</div>
<table class="table table-bordered">
<thead>
<th>ID</th>
<th>订单号</th>
<th>标题</th>
<th>价格</th>
<th>状态</th>
<th>管理员</th>
<th>操作</th>
</thead>
<tbody>
{
% for query in queryset %}
<tr uid="{
{ query.id }}">
<th>{
{
query.id }}</th>
<td>{
{
query.oid }}</td>
<td>{
{
query.title }}</td>
<td>{
{
query.price }}</td>
<td>{
{
query.get_status_display }}</td>
<td>{
{
query.admin.username }}</td>
<td>
<input uid="{
{ query.id }}" class="btn btn-primary btn-xs btn-edit" type="button"
value="编辑">
<input uid="{
{ query.id }}" class="btn btn-danger btn-xs btn-delete" type="button"
value="删除">
</td>
</tr>
{
% endfor %}
</tbody>
</table>
<ul class="pagination">
{
{
page_string }}
</ul>
</div>
</div>
{
% endblock %}
{
% block js %}
<script type="text/javascript">
//定义全局变量存储被删除的订单id
var DELETE_ID;
//编辑时原订单id存在,新建时不存在原订单所以id为0
var EDIT_ID;
$(function () {
bindBtnAddEvent();
bindBtnSaveEvent();
bindBtnDeleteEvent();
bindBtnEditEvent();
bindbtnConfirmDelete();
})
function bindBtnAddEvent() {
$("#btnAdd").click(function () {
//将编辑后残留的DELETE_ID设置为空
EDIT_ID = undefined;
//清空对话框中的默认数据
$("#formAdd")[0].reset();
//修改对话框标题
$("#myModalLabel").text("新建");
//点击新建按钮,显示对话框
$('#myModal').modal('show');
});
}
function bindBtnSaveEvent() {
$("#btnSave").click(function () {
//点击保存按钮,保存订单
//alert("保存成功!");
//清除错误信息(jQuery锁定位置)
$(".error-msg").empty();
if (EDIT_ID) {
//编辑
doEdit();
} else {
//添加
doAdd();
}
});
}
function doEdit() {
//向后台发送请求(添加的Ajax请求)
$.ajax({
url: "/order/edit/" + "?uid=" + EDIT_ID,
type: "post",
data: $("#formAdd").serialize(),
dataTypes: "JSON",
success: function (res) {
if (res.status) {
alert("保存成功!");
//清空表单
$("#formAdd")[0].reset();
//关闭对话框
$("#myModal").modal('hide')
//用JS实现页面刷新
location.reload();
} else {
if (res.tips) {
alert(res.tips);
} else {
//alert("保存失败!");
//显示错误信息
$.each(res.error, function (name, errorList) {
$("#id_" + name).next().text(errorList[0]);
})
}
}
}
})
}
function doAdd() {
//向后台发送请求(添加的Ajax请求)
$.ajax({
url: "/order/add/",
type: "post",
data: $("#formAdd").serialize(),
dataTypes: "JSON",
success: function (res) {
if (res.status) {
alert("保存成功!");
//清空表单
$("#formAdd")[0].reset();
//关闭对话框
$("#myModal").modal('hide')
//用JS实现页面刷新
location.reload();
} else {
//alert("保存失败!");
//显示错误信息
$.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
DELETE_ID = $(this).attr("uid");
})
}
//btnConfirmDelete
function bindbtnConfirmDelete() {
$("#btnConfirmDelete").click(function () {
//点击确定按钮,将全局变量中设置的DELETE_ID发送到后台
$.ajax({
url: "/order/delete/",//order/delete/?uid=XXX
type: "GET",
data: {
uid: DELETE_ID
},
dataTypes: "JSON",
success: function (res) {
if (res.status) {
//alert("删除成功!");
//隐藏删除对话框
$("#deleteModal").modal("hide");
//1、为了减轻服务器压力,此处用js在页面上删除当前一行数据
//$("tr[uid='"+DELETE_ID+"']").remove();
//全局变量置空
DELETE_ID = 0;
//2、显示当前数据(服务器压力较大)
location.reload()
} else {
alert(res.error);
}
}
})
})
}
function bindBtnEditEvent() {
$(".btn-edit").click(function () {
//.是属性里的,#是id赋值的
//清空对话框中的默认数据
$("#formAdd")[0].reset();
//获取当前订单的id
var uid = $(this).attr("uid");
EDIT_ID = uid;
//发送Ajax去后端获取当前行的相关数据
$.ajax({
url: "/order/detail/",
type: "get",
data: {
uid: uid,
},
dataTypes: "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 %}
urls.py
# ------------------订单管理---------------------------------------------------
path('order/list/', order.order_list),
path('order/add/', order.order_add),
path('order/delete/', order.order_delete),
path('order/detail/', order.order_detail),
path('order/edit/', order.order_edit),
order.py
@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":"数据不存在,请刷新重试。"})
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})
避免杂糅的更好办法是将新建和编辑两个表单分开写!!
测试,新建