1、功能介紹
這是一個基於前端頁面js代碼的動態效果和後端對數據庫數據更新的操做，主要實現的是會議室的預約功能，當員工進入預約頁面後能夠看到某天的某個會議室的某個時段是否被預約，當沒被預約的狀況下，就能夠預約會議室，這至關於對於會議室這種共享資產的合理化分配，快速便捷的完成會議室的預約。前端頁面時長這樣的。css
從上圖中，能夠清晰的看出那些人預約那些房間。咱們要實現的功能以下：html
1，當選擇一個時間，而後點擊提交按鈕，就會發送一個基於form表單的post請求，會把時間發過去而後，返回的頁面就是剛纔選擇日期的會議室預約狀況 2，點擊空白小格子時，顏色會變淺綠， 3，點擊被預約的小格子時，當名字是本身的名字時，會使顏色消失，變成白色小格子，而後把房間號和時間段放入刪除列表；當點擊的名字不是本身時，會彈出警告框，不能對其進行操做 4，點擊保存按鈕時，會把全部的淺綠的小格子的房間號和時間段放入添加列表；而後發送ajax請求，把添加列表和刪除列表發送到後端處理 5，後端拿到數據，先對刪除列表，把要刪除的刪除；而後再處理添加列表，把該添加的添加上
2、代碼
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('danger'); $(this).children('span').text(''); if (del_dic[name]){ del_dic[name].push(num)} else {del_dic[name]=[num]} } //剛纔被點中的，再次點擊，取消顏色 else if($(this).hasClass('success')){ $(this).removeClass('success'); } //沒被選中的，點擊變顏色 else { $(this).addClass('success'); } }); //保存的點擊事件 $('.tijiao').click(function () { //循環全部的td標籤，而後把擁有success類的標籤的值放入add_dic $('td').each(function () { var num=$(this).children('span').first().attr('class'); var name=$(this).parent().attr('class'); if($(this).hasClass('success')){ if (add_dic[name]){ add_dic[name].push(num)} else {add_dic[name]=[num]} }}); //把add_dic，not_add_dic加入一個列表中，最後把當前選擇的日期也放進去 var date=$('.left').first().val(); //用ajax請求，把列表發送到後端 $.ajax({ url:'', type:'post', data: {'add_dic':JSON.stringify(add_dic),'del_dic':JSON.stringify(del_dic),'date':JSON.stringify(date),'csrfmiddlewaretoken':$('[name="csrfmiddlewaretoken"]').val()}, success: function (res) { console.log(res); location.href='/houseorder/?time='+res } }) }) </script> {% endblock %}
3，後端代碼
def houseorder(request): date = request.GET.get('time') now = time.strftime('%Y-%m-%d', time.localtime(time.time())) if request.is_ajax(): #這是對ajax請求的處理 add_dic = json.loads(request.POST.get('add_dic')) del_dic = json.loads(request.POST.get('del_dic')) date = json.loads(request.POST.get('date')) date =date or now if del_dic: #拿到要刪除的字典，而後刪除 for key, value in del_dic.items(): for ele in value: Order.objects.filter(date=date, user_id=request.user.id, house_id=int(key), time=int(ele)).delete() if add_dic: #這是拿到添加的字典，而後添加 for key, value in add_dic.items(): for i in value: Order.objects.create(date=date, user_id=request.user.id, house_id=int(key), time=int(i)) return HttpResponse(date) #點擊日曆提交的post請求 if request.method == 'POST': date = request.POST.get('time')
這是構建頁面須要的數據，好比說表體。。。 date=date or now username = request.user.name orders = Order.objects.filter(date=date) houses = House.objects.all() choices = times data_list = [] for house in houses: #這就是構建表體數據 data_list.append(mark_safe('<tr class="%s"><td>%s(%s)</td>' % (house.id, house.name, house.size))) for choice in choices: for order in orders: if order.house.id == house.id and choice[0] == order.time: if username==order.user.name: tt = mark_safe('<td class="nn danger"><span class="%s">%s</span></td>' % (choice[0], order.user.name)) break else: tt = mark_safe('<td class="nn warning"><span class="%s">%s</span></td>' % (choice[0], order.user.name)) break else: tt =mark_safe( '<td class="nn"><span class="%s"></span></td>' % choice[0]) data_list.append(tt) data_list.append('</tr>') data = mark_safe(''.join(data_list)) return render(request, 'houseorder.html', locals())
對於預約類的功能均可以與此雷同，全部就能夠用一樣思路完成。前端
原文出處：https://www.cnblogs.com/12345huangchun/p/10446619.htmlajax