当前位置：首页 > news >正文

django学习入门系列之第十点《A 案例：员工管理系统18》

news 来源：原创 2025/5/12 7:20:38

文章目录

16 Ajax(订单案例)
- 16.1 创建表结构
- 16.2 创建模态框
- 16.3 更改样式(输入框各占一半)
往期回顾

16 Ajax(订单案例)

16.1 创建表结构

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

16.2 创建模态框

这个创建有两种方式来进行创建
- 方式一：直接用它官方文档
- 方式二：用js的方式

{% extends 'model.html' %}
{% block content %}
    <div class="container">
        <div>
            <input type="button" value="新建订单(1)" class="btn btn-primary" data-toggle="modal" data-target="#myModal"/>
        </div>
        <div>
            <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">&times;</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 apply_js %}
    <script type="text/javascript">
            $(function () {
                bindBtnEvent();
            })

            function bindBtnEvent() {
                $("#Btnadd").click(function () {
                    $('#myModal').modal('show')
                })
            }
    </script>
{% endblock %}

16.3 更改样式(输入框各占一半)

{% extends 'model.html' %}
{% block content %}
    <div class="container">
        <div>
            <input type="button" value="新建订单(1)" class="btn btn-primary" data-toggle="modal"
                   data-target="#myModal"/>
        </div>
        <div>
            <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">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                    <form id="add_form">
                        <div class="clearfix">
                        {% for foo in form %}
                            <div class="col-xs-6">
                                <div class="form-group">
                                <label>{{ foo.label }} </label>
                                {{ foo }}
                                    {# 添加一个绝对的定位，用来定位他的错误信息    #}
                            <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 apply_js %}
    <script type="text/javascript">
        $(function () {
            bindBtnEvent();
        })

        function bindBtnEvent() {
            $("#Btnadd").click(function () {
                $('#myModal').modal('show')
            })
        }
    </script>
{% endblock %}

在这里插入图片描述

往期回顾

1.【快速开发网站】
2.【浏览器能识别的标签1】
3.【浏览器能识别的标签2】
4.【浏览器能识别的标签3】
5.【浏览器能识别的标签4】
6.【案例1：用户注册】
7.【案例2：用户注册改进】
8.【快速了解 CSS】
9.【常用选择器概念讲解】
10.【CSS基础样式介绍1】
11.【CSS基础样式介绍2】
12.【CSS基础样式介绍3】
13.【CSS基础样式介绍3】
14.【案例小米商城头标】
15.【案例小米商城头标总结】
16.【案例小米商城二级菜单】
17.【案例商品推荐部分】
18.【伪类简单了解】
19.【position】
20.【案例小米商城中app图标代码】
21.【边框及总结】
22.【BootSrap初了解】
23.【BootSrap的目录栏】
24.【BootSrap的栅格系统】
25.【案例博客案例】
26.【案例登录】
27.【案例后台管理样例】
28.【图标】
29.【BootStrap依赖】
30.【javascript初了解】
31.【jJavaScript的变量】
32.【JavaScript的字符串类型】
33.【JavaScript的数组介绍】
34.【案例动态数据】
35.【javascript 对象（字典）】
36.【案例动态表格】
37.【Javascript的条件语句和函数】
38.【DOM初了解】
39.【DOM的事件了解】
40.【jQuery初了解】
41.【jQuery寻找标签】
42.【jQuery寻找标签2】
43.【jQuery寻找标签(间接寻找)】
44.【案例菜单的切换】
45.【案例只能打开一个菜单】
46.【jQuery 简单操作】
47.【案例动态创建数据】
48.【案例点击获取文本】
49.【案例点击删除文本】
50.【案例表格操作】
51.【案例添加页面】
52.【初识MySQL】
53.【MySQL命令介绍一】
54.【MySQL命令介绍二】
55.【MySQL命令介绍三】
56.【案例：员工管理】
57.【案例 Flask+MySQL新增用户】
58.【案例 Flask+MySQL查询所有用户】
59.【初识 django】
60.【django的快速上手】
61.【django的模板语法】
62.【django的获取请求与响应】
63.【案例用户登录】
64.【django中数据库操作】
65.【django中数据库操作–创建与删除表】
66.【django中数据库操作–操作表中的数据】
67.【案例用户管理】
68.【A 案例：员工管理系统1】
69.【A 案例：员工管理系统2】
70.【A 案例：员工管理系统3】
71.【A 案例：员工管理系统4】
72.【A 案例：员工管理系统5】
73.【A 案例：员工管理系统6】
74.【A 案例：员工管理系统7】
75.【A 案例：员工管理系统8】
76.【A 案例：员工管理系统9】
77.【A 案例：员工管理系统10】
78.【A 案例：员工管理系统11】
79.【A 案例：员工管理系统12】
80.【A 案例：员工管理系统13】
81.【A 案例：员工管理系统14】
82.【A 案例：员工管理系统15】
83.【A 案例：员工管理系统16】
84.【A 案例：员工管理系统17】