django学习记录07——订单案例（复选框+ajax请求）

1.订单的数据表

1.1 数据表结构

1.2 数据表的创建

models.py

class Order(models.Model):    """订单号"""    oid = models.CharField(max_length=64, verbose_name="订单号")    title = models.CharField(max_length=64, verbose_name="名称")    price = models.FloatField(verbose_name="价格")    status_choice = (        (1,"待支付"),        (2,"已支付"),    )    status = models.SmallIntegerField(verbose_name="状态",choices=status_choice,default=1)    admin = models.ForeignKey(verbose_name="管理员",to="Admin",on_delete=models.CASCADE)

• status字段采用choice方式，获取值特别注意使用`get_status_display``

• ``admin`作为外键，使订单表与管理员连接，自动创建admin_id字段，采用级联删除方式。

  ​ 获取admin表username字段的方法

  • 直接 .字段
  • 在admin中设置默认返回username，def __str__(self): return self.username

    2.订单案例的实现

    2.1 订单案例功能概述

    ​ 将订单的展示、订单的增加、订单的更新、订单的删除等功能集成到一个页面中。增加和删除页面使用模态框实现，增删改查均使用Ajax请求进行数据传输。

    2.2 订单案例总页面和列表展示功能

    oeder_list

    def order_list(request):    queryset = models.Order.objects.all()    form = OrderModelForm()    page_object = Pagination(request, queryset)    context = {        'queryset': page_object.query_set,        'form': form,        'page_str': page_object.createHtml()    }    return render(request, "order_list.html", context)

    queryset = models.Order.objects.all() 获取数据库数据

    form = OrderModelForm() 向前端传输构造的表单，用与增加更新页面的形成

    page_object = Pagination(request, queryset) 分页组件的应用

    order_list.html

    {% extends 'layout.html' %}{% block content %}...    .........        .........                订单列表                                                                    {% for obj in queryset %}                                    {% endfor %}                            
    ID
                        
    订单号
                        
    名称
                        
    价格
                        
    状态
                        
    管理员
                        
    操作
                    
    {{ obj.id }}
                            
    {{ obj.oid }}
                            
    {{ obj.title }}
                            
    {{ obj.price }}
                            
    {{ obj.get_status_display }}
                            
    {{ obj.admin.username }}
                            
    ...                        ...                        
                        
            
                {{ page_str }}        
    {% endblock %}{% block js %}.........{% endblock %}

    {{ obj.get_status_display }} choice字段的数据展示{{ obj.admin.username }} 外键各字段的展示方法
    {{ page_str }}
    分页功能

    2.3 订单增加与订单更新功能

    由于增加和更新都是用复选框，而且一般情况下增加页面和更新页面可以各使用一个复选框，但本文将增加页面和更新页面集成到一个复选框中。

    增加和更新功能集成到一个复选框中，并且两个功能都需要创建数据输入的表单。不同的是，增加功能相对较简单，更新功能需要获取待更新数据的id，并且将待更新数据旧数据填充到表单中

    因此增加和更新功能复选框的区分标准是是否定义了待删除数据id

    2.3.1 复选框的生成

    order_list.html

    {% extends 'layout.html' %}{% block content %}                                                                                                                
                                                                                                            {% for field in form %}                                                                                                            {{ field.label }}                                        {{ field }}                                                                                                                                        {% endfor %}                                                                                                取 消                    保 存                                            ......    ......{% endblock %}{% block js %}......{% endblock %}

    2.3.2复选框的内容

                                                                
                                                        正常的modelForm表单构造                                                    取 消                    保 存                                        

    ModelForm的表单构造，由order_list视图函数传来的form来实现

    2.3.3增加订单绑定复选框

    1. 新建订单1按钮，采用官方文档给的唤醒复选框的方法 data-target="#Modal" 直接写复选框的id即可
    2. 新建订单2按钮，采用jQuery+js进行唤醒复选框

        var UPDATE_ID;    $(function () {        //增加订单按钮        bindBtnaddShow();    })    function bindBtnaddShow() {        $('#addShow').click(function () {            //由于添加和更新使用同一个对话框，每次点击要清除表单            //成功后清除表单            // $("#formAdd")jQuery对象无重置功能  $("#formAdd")[0] Dom对象，有重置功能            $("#formAdd")[0].reset();            //根据对话框的id，更改对话框标题            $('#myModalLabel').text('新建订单');            // 点击新建按钮，显示对话框            $('#Modal').modal('show');        })    }

    加载页面自动执行函数

    $(function () {    //增加订单按钮    bindBtnaddShow();})

    $('#addShow').click(function () { }) 将id为addshow的按钮绑定以下事件

    $('#myModalLabel').text('新建订单'); 由于增加与更新共用复选框，因此可以根据不同请求对id为myModalLabel的标签的文本进行赋值

    $('#Modal').modal('show'); 显示id=model的复选框

    2.3.4 更新订单绑定复选框