model表结构 用户表 日期表 会议室表 预约记录表 与会议室表FK字段 与日期表FK的字段 与用户表FK的字段 时间段字段 会议室表、日期表、用户表、联合唯一 HTML： 日期用input提交 form的get提交 用表格的方式存放预约记录 表头是时间段 表主体的th是会议室地址 表主体的tr是每条记录 记录如果如果有人预约，将在每格显示预约人的名字，并用橙色的背景 显示预约记录 视图部分 制作API，做成列表，将每条预约记录中的会议室名称，时间段，预约人，以字典的格式存放于表格中 js部分 因为存放的是列表数据 现将列表循环，得到的是每一个字典 addr:"卢浮宫",timeline:1,user:"梁端琪" 然后再循环每个地址，在此基础上再循环每个时间段，这样就得到了，得到了具体的时间和地点 最后将预约姓名添加到得到的位置 添加预约记录 js得到时间段和会议室名称，组装成json 通过ajax post到路由 视图 从session获得用户，路由获得日期，还有ajax发送的时间段和会议室名称 这样就可以创建一条会议室记录 取消预约记录 类似于添加
代码
view
import json from django.shortcuts import render,HttpResponse,redirect from app01 import models from django.forms import Form,fields,widgets import datetime # Create your views here. def base(request,**kwargs): print(kwargs) date_obj = models.Date.objects.filter(date=kwargs.get('day')) MeetingRoom_list=models.MeetingRoom.objects.all() if request.is_ajax(): if request.method=='POST': datalists=json.loads(request.body.decode('utf8')) print('se',request.session.get('user')) user_obj=models.UserInfo.objects.filter(username=request.session.get('user')).first() try: date_obj=models.Date.objects.create(date=kwargs.get('day')) except: date_obj=models.Date.objects.filter(date=kwargs.get('day')).first() print('date',date_obj.date) for datalist in datalists: meetingroom=models.MeetingRoom.objects.filter(name=datalist['MeetingRoom']).first() print('m',meetingroom) try: Record=models.Record.objects.create(meetingroom=meetingroom,timeline=datalist['timeline'],userinfo=user_obj,date=date_obj) except BaseException: import sys print(sys.exc_info()) return redirect('//') else: data_list=[] if models.Date.objects.filter(date=kwargs.get('day')).first(): Record_list=models.Record.objects.filter(date=date_obj).all() for Record_obj in Record_list: Record_dict={'timeline':Record_obj.timeline,'addr':Record_obj.meetingroom.name,'user':Record_obj.userinfo.username} data_list.append(Record_dict) return HttpResponse(json.dumps(data_list)) if request.method=='POST': date=request.POST.get('date') print(date.replace('-','')) return redirect('/index/%s'%date) return render(request,'base.html',{'MeetingRoom_list':MeetingRoom_list,'range_num':range(1,14)}) class LoginForm(Form): uname=fields.CharField( label='用户名', error_messages={'required':'用户名不能为空'}, ) upwd=fields.CharField( label='密码', error_messages={'required': '密码不能为空'}, widget=widgets.PasswordInput() ) def login(request): form=LoginForm() if request.method=='POST': form=LoginForm(request.POST) if form.is_valid(): if models.UserInfo.objects.filter(username=form.cleaned_data['uname']): request.session['user']=form.cleaned_data['uname'] return redirect('/index/') return render(request,'login.html',{'form':form}) def del_record(request,**kwargs): if request.is_ajax(): datalists = json.loads(request.body.decode('utf8')) user_obj = models.UserInfo.objects.filter(username=request.session.get('user')).first() date_obj = models.Date.objects.filter(date=kwargs.get('day')).first() for data in datalists: meetingroom = models.MeetingRoom.objects.filter(name=data['MeetingRoom']).first() models.Record.objects.filter(timeline=data.get('timeline'),userinfo=user_obj,date=date_obj,meetingroom=meetingroom).delete() print(datalists) return HttpResponse(json.dumps(1))
HTML+js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="/static/bootstrap.min.css"> <link rel="stylesheet" href="/static/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css"> <script src="/static/jquery-3.2.1.js"></script> <script src="/static/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.fr.js"></script> <script src="/static/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script> <script src="/static/jquery.cookie.js"></script> <style> .sign { background-color: blue; color: red; } .B_gold{ background-color: gold; } </style> </head> <body> <div class="row"> <div class="col-md-10 col-md-offset-1"> <div class="col-md-2"> <a href=""><button class="btn btn-primary" id="save-record">保存</button></a> <a href=""> <button class="btn btn-danger" id="del_record">取消预约</button> </a> </div> <div class="col-md-3 col-md-offset-6"> {# <input type="text" id="datetimepicker"><button class="btn btn-default">提交</button>#} <form action="" method="post"> {% csrf_token %} <input type="date" name="date"><input type="submit"> </form> </div> <table class="table table-bordered"> <thead> <tr> <th>会议室</th> <th>8:00</th> <th>9:00</th> <th>10:00</th> <th>11:00</th> <th>12:00</th> <th>13:00</th> <th>14:00</th> <th>15:00</th> <th>16:00</th> <th>17:00</th> <th>18:00</th> <th>19:00</th> <th>20:00</th> </tr> </thead> <tbody> {% for MeetingRoom in MeetingRoom_list %} <tr> <th scope="row" height="80" class="addr">{{ MeetingRoom.name }}</th> {% for i in range_num %} <td class="td_{{ i }}" timeline={{ i }}></td> {% endfor %} {# <td class="td_1" timeline="1"></td>#} {# <td class="td_2" timeline="2"></td>#} {# <td class="td_3" timeline="3"></td>#} {# <td class="td_4" timeline="4"></td>#} {# <td class="td_5" timeline="5"></td>#} {# <td class="td_6" timeline="6"></td>#} {# <td class="td_7" timeline="7"></td>#} {# <td class="td_8" timeline="8"></td>#} {# <td class="td_9" timeline="9"></td>#} {# <td class="td_10" timeline="10"></td>#} {# <td class="td_11" timeline="11"></td>#} {# <td class="td_12" timeline="12"></td>#} {# <td class="td_13" timeline="13"></td>#} </tr> {% endfor %} </tbody> </table> </div> </div> </body> <script> $('[class^=td_]').click(function () { if($(this).attr('class')=='B_gold'){ }else { $(this).addClass('sign') } }); $('[class^=td_]').dblclick(function () { $(this).removeClass('sign') }); //保存预约数据 $('#save-record').click(function () { var list = []; $('.sign').each(function (i, j) { var timeline = $(j).attr('timeline'); var MeetingRoom = $(j).parent().children().first().text(); var dict = {'timeline': timeline, 'MeetingRoom': MeetingRoom}; list.push(dict) }); console.log(list) $.ajax({ url: window.location.pathname, data: JSON.stringify(list), headers: {"X-CSRFToken": $.cookie('csrftoken')}, type: 'post', contentType: 'json', success:function (data) { var data=JSON.parse(data); } }) }) $.ajax({ url:'', success:function (data) { var datalist=JSON.parse(data); {#console.log('dddd',datalist)#} $.each(datalist,function (i,j) { {# alert(j['MeetingRoom'])#} {# console.log(j.addr)#} $('.addr').each(function (m,n) { {# console.log(n)#} if ($(n).text()==j.addr){ {#console.log($(n))#} $(n).parent().children().each(function (a,b) { if($(b).attr('timeline')==j['timeline']){ {#console.log($(b))#} $(b).text(j['user']).addClass('B_gold') } }) } }) }) } }); $('.B_gold').click(function () { $(this).add }); $("#datetimepicker").datetimepicker({ format: 'yyyy-mm-dd ' }); //取消预约 $('#del_record').click(function () { var list = []; $('.sign').each(function (i,j) { var timeline = $(j).attr('timeline'); var MeetingRoom = $(j).parent().children().first().text(); var dict = {'timeline': timeline, 'MeetingRoom': MeetingRoom}; list.push(dict) }) $.ajax({ url: 'del/record', data: JSON.stringify(list), headers: {"X-CSRFToken": $.cookie('csrftoken')}, type: 'post', contentType: 'json', success:function (data) { var data=JSON.parse(data); alert(data) } }) }) </script> </html>