1.模态对话框增加主机
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .hide { display: none; } .shade { position: fixed; top: 0; right: 0; left: 0; bottom: 0; background-color: black; opacity: 0.6; z-index: 100; } .add-modal { position: fixed; height: 300px; width: 400px; top: 100px; left: 50%; z-index: 101; border: 1px solid red; background: white; margin-left: -200px; } </style> <body> <h2>业务线列表(对象)</h2> <div> <input id="add_host" type="submit" value="增加"> </div> <table border="1"> <thead> <tr> <th>序号</th> <th>IP</th> <th>端口</th> <th>业务线名称</th> </tr> </thead> <tbody> {% for row in v1 %} <tr hid='{{ row.nid }}' bid='{{ row.b_id }}'> <td>{{ forloop.counter }}</td> <td>{{ row.ip }}</td> <td>{{ row.port }}</td> <td>{{ row.b.caption }}</td> </tr> {% endfor %} </tbody> </table> <h2>业务线列表(字典)</h2> <table border="1"> <thead> <tr> <th>主机名</th> <th>业务线名称</th> </tr> </thead> <tbody> {% for row in v2 %} <tr hid='{{ row.nid }}' bid='{{ row.b_id }}'> <td>{{ row.hostname }}</td> <td>{{ row.b__caption }}</td> </tr> {% endfor %} </tbody> </table> <h2>业务线列表(元组)</h2> <table border="1"> <thead> <tr> <th>主机名</th> <th>业务线名称</th> </tr> </thead> <tbody> {% for row in v3 %} <tr hid='{{ row.0 }}' bid='{{ row.2 }}'> <td>{{ row.1 }}</td> <td>{{ row.3 }}</td> </tr> {% endfor %} </tbody> </table> <div class="shade hide"></div> <div class="add-modal hide"> <form method="post" action="/app02/host/"> <div class="group"> <input type="text" placeholder="主机名" name="hostname"> </div> <div class="group"> <input type="text" placeholder="IP" name="ip"> </div> <div class="group"> <input type="text" placeholder="端口" name="port"> </div> <div class="group"> <select name="b_id"> {% for op in b_list %} <option value="{{ op.id }}">{{ op.caption }}</option> {% endfor %} </select> </div> <input type="submit" value="提交"> <input id="cancel" type="button" value="取消"> </form> </div> <script src="/static/jquery.min.js"></script> <script> $(function () { $('#add_host').click(function () { $('.shade,.add-modal').removeClass('hide'); }) $('#cancel').click(function () { $('.shade,.add-modal').addClass('hide'); }) }) </script> </body> </html>
2.后台代码
from django.shortcuts import render,HttpResponse,redirect from app02 import models # Create your views here. def business(request): v = models.Business.objects.all() #<QuerySet [<Business: Business object (1)>, <Business: Business object (2)>, <Business: Business object (3)>, <Business: Business object (4)>]> v2 = models.Business.objects.all().values('id','caption') #<QuerySet [{'caption': '运维', 'id': 1}, {'caption': '开发', 'id': 2}, {'caption': '市场部', 'id': 3}, {'caption': '测试部', 'id': 4}]> v3 = models.Business.objects.all().values_list() #<QuerySet [(1, '运维', 'sa'), (2, '开发', 'sa'), (3, '市场部', 'sa'), (4, '测试部', 'sa')]> return render(request,'app02/business.html',{'v':v,'v2':v2,'v3':v3}) # def host(request): # v1 = models.Host.objects.filter(nid__gt=0) # for row in v1: # print(row.nid,row.ip,row.b) # v2 = models.Host.objects.filter(nid__gt=0).values('nid','hostname','b_id','b__caption') # for row in v2: # print(row['nid'],row['hostname'],row['b_id'],row['b__caption']) # v3 = models.Host.objects.filter(nid__gt=0).values_list('nid','hostname','b_id','b__caption') # return render(request, 'app02/host.html', {'v1': v1, 'v2': v2, 'v3': v3}) # # return HttpResponse('host') def host(request): if request.method == 'GET': v1 = models.Host.objects.filter(nid__gt=0) v2 = models.Host.objects.filter(nid__gt=0).values('nid','hostname','b_id','b__caption') v3 = models.Host.objects.filter(nid__gt=0).values_list('nid','hostname','b_id','b__caption') b_list = models.Business.objects.all() return render(request, 'app02/host.html', {'v1': v1, 'v2': v2, 'v3': v3,'b_list':b_list}) elif request.method == 'POST': h = request.POST.get('hostname') i = request.POST.get('ip') p = request.POST.get('port') b = request.POST.get('b_id') models.Host.objects.create(hostname=h,ip=i,port=p,b_id=b) # return render(request, 'app02/host.html') return redirect('/app02/host')