一、功能介绍

这是一个基于前端页面js代码的动态效果和后端对数据库数据更新的操作，主要实现的是会议室的预定功能，当员工进入预定页面后可以看到某天的某个会议室的某个时段是否被预定，当没被预定的情况下，就可以预定会议室，这相当于对于会议室这种共享资产的合理化分配，快速便捷的完成会议室的预定。前端页面时长这样的。

　　从上图中，可以清晰的看出那些人预定那些房间。我们要实现的功能如下：

1，当选择一个时间，然后点击提交按钮，就会发送一个基于form表单的post请求，会把时间发过去然后，返回的页面就是刚才选择日期的会议室预定情况

2，点击空白小格子时，颜色会变浅绿，

3，点击被预定的小格子时，当名字是自己的名字时，会使颜色消失，变成白色小格子，然后把房间号和时间段放入删除列表；当点击的名字不是自己时，会弹出警告框，不能对其进行操作

4，点击保存按钮时，会把所有的浅绿的小格子的房间号和时间段放入添加列表；然后发送ajax请求，把添加列表和删除列表发送到后端处理

5，后端拿到数据，先对删除列表，把要删除的删除；然后再处理添加列表，把该添加的添加上

　　二、代码

　　1，创建模型

class UserInfo（models.Model）: #这是user表
　　pass

class House(models.Model):          #这是房间表
    '''会议室表'''
    name=models.CharField(max_length=5)
    size=models.CharField(max_length=5)

    def __str__(self):
        return self.name

times=((1, '09:00-10:00'), (2, '10:00-11:00'), (3, '11:00-12:00'), (4, '12:00-13:00'),
        (5, '13:00-14:00'), (6, '14:00-15:00'), (7, '15:00-16:00'), (8, '16:00-17:00'),
        (9, '17:00-18:00'), (10, '18:00-19:00'), (11, '19:00-20:00'),(12, '20:00-21:00'))
class Order(models.Model):            #这是会议室预定记录表
    '''会议室预定记录表'''
    date=models.DateField()
    user=models.ForeignKey(to='UserInfo',on_delete=models.CASCADE)
    house=models.ForeignKey(to='House',on_delete=models.CASCADE)
    time = models.IntegerField(choices=times)
    class Meta:
        unique_together = ("date", "house", 'time')          #这是联合唯一，

　　2，前端代码

{% extends 'base.html' %}
{% block css %}
    <style>
        .outer{
            width: 100%;
            height: 40px;
            background-color: #337ab7;
            color: white;
            line-height: 40px;
        }

        .left{
            float: left;
            margin-top: 10px;
            margin-left: 10px;
            color: black;
            height: 20px;
        }
        #title{
            float: right;
            margin-right: 500px;
            font-size: 20px;
        }
        #date{
            float: left;
        }
    </style>
{% endblock %}
{% block content %}
    <div class="container">
        <div class="outer">
            <div id="date">          #这是日期
                <form action="/houseorder/" method="post">
                {% csrf_token %}
                <div>                        
                    <input type="submit" style="color: black;height: 20px;margin-top: 10px;line-height: 20px">
                    <input type="date" name="time" class="left" value="{{ date }}">
                </div>
                </form>
            </div>
            <div id="title">会议室预定表</div>
        </div>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>会议室</th>
                    {% for choice in choices %}   #这是循环生产时间的信息，也就是表头
                        <th>{{ choice.1 }}</th>
                    {% endfor %}
                </tr>
            </thead>
            <tbody>
                {{ data }}         #所有的表体数据都是由后端构造的
            </tbody>
        </table>
        <button class="btn btn-info tijiao">保存</button>
    </div>

{% endblock %}
{% block script %}
    <script>
        var add_dic={};
        var del_dic={};
        //给每个nn类的标签绑定点击事件
        $('.nn').click(function () {
            var text=$(this).text();
            var user=$('.user').attr('id');
            console.log(user);
            var num=$(this).children('span').first().attr('class');
            var name=$(this).parent().attr('class');
            //已经被别人选中的
            if ($(this).hasClass('warning')){
                alert('别人已经选定')
            }
            //被自己选中的
            else if ($(this).hasClass('danger')){
                $(this).removeClass('dang