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))