html简单的模态对话框
CSS样式：
<style> {# 隐藏#} .hide{ display: none; } {# 遮罩层#} .shade{ position: fixed; top: 0 ; left: 0; right: 0; bottom: 0; background-color: black; opacity: 0.6; z-index: 9; } {# 对话框#} .mode{ position: fixed; top: 230px; height: 400px; width: 500px; left: 50%; background-color: white; margin-left: -250px; z-index: 10; } </style>
html：
<div class="shade hide"></div> <div class="mode hide"> <div style="margin: 100px 100px"> <form action="/cmdb/assets/" method="post"> {% csrf_token %} <div> <input type="text" placeholder="服务器名称" name="h"> </div> <div> <input type="text" placeholder="IP地址" name="ip"> </div> <div> <input type="text" placeholder="端口号" name="port"> </div> <div> <select name="b_id"> {% for row in v1 %} <option value="{{ row.id }}">{{ row.caption }}</option> {% endfor %} </select> </div> <span><input type="submit" value="提交"></span> <span><input id="submit" type="button" value="提"></span> <span><input id = quxiao type="button" value="取消"></span> <span id="error" style="color: red"></span> </form> </div> </div>
script:
因为我们同事给遮罩层和输入框加上了hide样式（自动隐藏），所以当点击添加的时候就让遮罩层和输入层弹出。点击输入框里面的取消时候（id=quxiao），继续隐藏
<script> $(function(){ $('#add').click(function(){ $('.shade,.mode').removeClass('hide') }) }); $(function(){ $('#quxiao').click(function(){ $('.shade,.mode').addClass('hide') }) }); </script>
小笔记：
$(function(){});相当于$(document).ready() 。
$(function(){});意思是当页面加载完这个script标签就会执行里边的代码了。需求：我想做一个页面，不想让用户点击事件才显出动态效果，而是想让html加载完成以后自动出现动态效果。那么这样我们就可以把动态效果的方法直接写到$(function(){});这里面。写法如上：
小记：
html：
<table style="width: 800px"> <thead> <tr> <th>编号</th> <th>服务器名称</th> <th>IP地址</th> <th>端口</th> <th>业务线</th> <th>操作</th> </tr> </thead> <tbody> {% for row in v2 %} <tr> <td>{{ row.nid }}</td> <td>{{ row.hostname }}</td> <td>{{ row.ip }}</td> <td>{{ row.port }}</td> <td>{{ row.b.caption }}</td> <td style="float: right"> <input onclick="edit('{{ row.hostname }}','{{ row.ip }}','{{ row.port }}','{{ row.b_id }}')" type="button" value="编辑"> <input type="submit" value="保存"> <input type="submit" value="删除"> </td> </tr> {% endfor %} </tbody> </table>
模态对话框的form表单：
<form action="/cmdb/assets/" method="post"> {% csrf_token %} <div> <input id="host" type="text" placeholder="服务器名称" name="h"> </div> <div> <input id="ip" type="text" placeholder="IP地址" name="ip"> </div> <div> <input id="port" type="text" placeholder="端口号" name="port"> </div> <div> <select id="b_id" name="b_id"> {% for row in v1 %} <option value="{{ row.id }}">{{ row.caption }}</option> {% endfor %} </select> </div> <span><input type="submit" value="提交"></span> <span><input id="submit" type="button" value="提"></span> <span><input id = quxiao type="button" value="取消"></span> <span id="error" style="color: red"></span> </form>
jquery：
function edit(hostname,ip,port,bid){
$('.shade,.mode').removeClass('hide');
var h = $(this);
$('#host').val(hostname)
$('#ip').val(ip)
$('#port').val(port)
$('#b_id').val(bid)
}
python后台方法(只需借鉴)：
*注意：
因为提交过来的数据是更改，所以我们必须拿到模态对话框里面的这条数据的id，后台才能更改。否则就成了新增了。
def assets(request): now = time.strftime('%Y-%m-%d %H:%M:%S',time.localtime(time.time())) if request.method == "GET": #QuerySet(查到的是QuerySet对象) v1 = models.Business.objects.all() #gt表示大于，lt表示小于。大于等于gte,小于等于lte，写法跟下面相同 v2 = models.Assets.objects.filter(nid__gt=0) return render(request,'assets.html',{'nowdate':now,"v1":v1,'v2':v2}) elif request.method == "POST": #引用json模块 import json #首先定义好状态，错误信息，数据。 ret = {'status':True,'error':None,'data':True} try: n = request.POST.get('h') i = request.POST.get('ip') po = request.POST.get('port') bid = request.POST.get('b_id') print(n,i,po,bid,sep='\t') #如果hostname这个名字长度大于5就执行数据库操作 if n and len(n) > 5: #数据库具体操作 pass #否则数据库操作失败，状态就是False。提示用户用户名太短。 else: ret['status'] = False ret['error'] = "用户名太短" except Exception as e: ret['status'] = False ret['error'] = "用户名太短" #牢记ajax只能用HttpResponse返回，但是上面我们定义好的是ret是一个字典。 #所以我们json.dumps序列化ret给ajax传过去（HttpResponse把ret当做一个字符串发给了ajax） return HttpResponse(json.dumps(ret))优质内容筛选与推荐>>
1、编程中20 个非常有用的例子ASP
2、Java虚拟机解析篇之---内存模型
3、探究PHP底层
4、现代软件工程 第一周博客作业
5、js 时间格式化和时间戳