溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
父層：
<div class="col-xs-12">
<div class="box">
<div class="box-header">
<h4 class="box-title">主機監控列表</h4>
</div>
<!-- /.box-header -->
<div class="box-body" >
<table id="example2" class="table table-bordered table-hover">
<thead>
<tr>
<th>ID</th>
<th>標簽</th>
<th>IP地址</th>
<th>主機名</th>
<th>監控用戶名</th>
<th>主機通斷告警</th>
<th>CPU使用率告警</th>
<th>內存使用率告警</th>
<th>磁盤使用率告警</th>
<th ></th>
<th ></th>
</tr>
</thead>
{% for linux_server in linuxs_servers %}
<tr>
<td>{{ forloop.counter }} </td>
<td>{{ linux_server.tags}} </td>
<td>{{ linux_server.host}} </td>
<td>{{ linux_server.host_name}} </td>
<td>{{ linux_server.user}} </td>
<td align="center">{{ linux_server.connect_cn}} </td>
<td align="center">{{ linux_server.cpu_cn }} </td>
<td align="center">{{ linux_server.mem_cn }} </td>
<td align="center">{{ linux_server.disk_cn }} </td>
<td>
<div class="box-tools pull-right">
<a href="#" rel="external nofollow" >
<button type="button" class="btn btn-default btn-sm" οnclick="return pop(this.value)" value="{{ linux_server.id }}"><i class="fa fa-edit"></i></button></a>
</div>
</td>
<td>
<div class="box-tools pull-right">
<a href="/linux_servers_del?id={{ linux_server.id }}" rel="external nofollow" >
<button type="button" class="btn btn-default btn-sm"><i class="fa fa-trash-o"></i></button></a>
</div>
</td>
</tr>
{% endfor %}
</table>
</div>
<div class="box-footer clearfix">
<span class="step-links">
{% if linuxs_servers.has_previous %}
<a href="?page_linux={{ linuxs_servers.previous_page_number }}" rel="external nofollow" >上一頁</a>
{% endif %}
<span class="current">
當前頁{{ linuxs_servers.number }} 共計{{ linuxs_servers.paginator.num_pages }}
</span>
{% if linuxs_servers.has_next %}
<a href="?page_linux={{ linuxs_servers.next_page_number }}" rel="external nofollow" >下一頁</a>
{% endif %}
</span>
<div class="pull-right">
<a href="/linux_servers_add" rel="external nofollow" class="btn btn-primary btn-block btn-flat">新增</a>
</div>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
{#用于接收linux_server__edit.html中layui子層的傳值#}
<input id="handle_status" value="" hidden="hidden">
</div>
點擊編輯按鈕，執行方法：
<script>
function pop(n){
layer.open({
type: 2,
title: '編輯主機信息',
closeBtn: 1,
area: ['700px', '550px'],
shadeClose: true, //點擊遮罩關閉
content: ['/linux_servers_edit?id='+n,],
end:function(){
var handle_status = $("#handle_status").val();
if ( handle_status == '1' ) {
layer.msg('保存成功！',{
icon: 1,
time: 2000 //2秒關閉（如果不配置，默認是3秒）
},function(){
history.go(0);
});
} else if ( handle_status == '2' ) {
layer.msg('修改失敗！',{
icon: 2,
time: 2000 //2秒關閉（如果不配置，默認是3秒）
},function(){
history.go(0);
});
}
}
});
}
</script>
--linux_server_edit編輯方法：
@login_required(login_url='/login')
def linux_servers_edit(request):
status = 0
rid = request.GET.get('id')
linux_server_edit = models_linux.TabLinuxServers.objects.get(id=rid)
if request.method == "POST":
if request.POST.has_key('commit'):
tags = request.POST.get('tags', None)
host_name = request.POST.get('host_name', None)
host = request.POST.get('host', None)
user = request.POST.get('user', None)
password = base64.encodestring(request.POST.get('password', None))
connect_cn = request.POST.get('connect', None)
connect = tools.isno(connect_cn)
cpu_cn = request.POST.get('cpu', None)
cpu = tools.isno(cpu_cn)
mem_cn = request.POST.get('mem', None)
mem = tools.isno(mem_cn)
disk_cn = request.POST.get('disk', None)
disk = tools.isno(disk_cn)
models_linux.TabLinuxServers.objects.filter(id=rid).update(tags=tags,host_name=host_name, host=host, user=user,
password=password, connect_cn=connect_cn,
connect=connect,
cpu_cn=cpu_cn, cpu=cpu, mem_cn=mem_cn, mem=mem,
disk_cn=disk_cn, disk=disk)
status = 1
elif request.POST.has_key('logout'):
logout(request)
return HttpResponseRedirect('/login/')
return render_to_response('linux_servers_edit.html', {'linux_server_edit': linux_server_edit,'status':status})
對應的template
<!DOCTYPE html> <!-- This is a starter template page. Use this page to start your new project from scratch. This page gets rid of all links and provides the needed markup only. --> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>DB monitor | Starter</title> <!-- Tell the browser to be responsive to screen width --> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <link rel="stylesheet" href="/static/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow" > <!-- Font Awesome --> <link rel="stylesheet" href="/static/bower_components/font-awesome/css/font-awesome.min.css" rel="external nofollow" > <!-- Ionicons --> <link rel="stylesheet" href="/static/bower_components/Ionicons/css/ionicons.min.css" rel="external nofollow" > <!-- Theme style --> <link rel="stylesheet" href="/static/dist/css/AdminLTE.min.css" rel="external nofollow" > <!-- AdminLTE Skins. We have chosen the skin-blue for this starter page. However, you can choose any other skin. Make sure you apply the skin class to the body tag so the changes take effect. --> <link rel="stylesheet" href="/static/dist/css/skins/skin-blue.min.css" rel="external nofollow" > <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <!-- Google Font --> <link rel="stylesheet" rel="external nofollow" > </head> <!-- BODY TAG OPTIONS: ================= Apply one or more of the following classes to get the desired effect |---------------------------------------------------------| | SKINS | skin-blue | | | skin-black | | | skin-purple | | | skin-yellow | | | skin-red | | | skin-green | |---------------------------------------------------------| |LAYOUT OPTIONS | fixed | | | layout-boxed | | | layout-top-nav | | | sidebar-collapse | | | sidebar-mini | |---------------------------------------------------------| --> <body class="hold-transition skin-blue sidebar-mini"> <div class="wrapper"> <!-- Content Wrapper. Contains page content --> <div class="content-wrapper"> <!-- Content Header (Page header) --> <!-- Main content --> <section class="content container-fluid"> <!-------------------------- | Your Page Content Here | --------------------------> <!-- Main content --> <section class="content"> <div class="row"> <div class="col-xs-12"> <div class="box box-solid"> <!-- form start --> <form class="form-horizontal" action="" method="POST"> <div class="box-body"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">標簽</label> <div class="col-sm-10"> <input type="text" class="form-control" name="tags" value={{ linux_server_edit.tags }}> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">主機名</label> <div class="col-sm-10"> <input type="text" class="form-control" name="host_name" value={{ linux_server_edit.host_name }}> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">主機IP</label> <div class="col-sm-10"> <input type="text" class="form-control" name="host" value={{ linux_server_edit.host }}> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">監控用戶名</label> <div class="col-sm-10"> <input type="text" class="form-control" name="user" value={{ linux_server_edit.user }}> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">監控用戶密碼</label> <div class="col-sm-10"> <input type="password" class="form-control" name="password" value={{ linux_server_edit.password }}> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">通斷告警</label> <div class="col-sm-10"> <input type="text" class="form-control" name="connect" value={{ linux_server_edit.connect_cn }}> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">CPU使用率告警</label> <div class="col-sm-10"> <input type="text" class="form-control" name="cpu" value={{ linux_server_edit.cpu_cn }}> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">內存使用率告警</label> <div class="col-sm-10"> <input type="text" class="form-control" name="mem" value={{ linux_server_edit.mem_cn }}> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">磁盤使用率告警</label> <div class="col-sm-10"> <input type="text" class="form-control" name="disk" value={{ linux_server_edit.disk_cn }}> </div> </div> <!-- /.box-body --> <div class="box-footer"> <button type="submit" class="btn btn-info pull-right" name="commit">保存</button> </div> </div> <!-- /.box-footer --> </form> </div> <!-- /.box --> </div> <!-- /.col --> </div> <!-- /.row --> </section> </section> <!-- /.content --> </div> <!-- /.content-wrapper --> <!-- Add the sidebar's background. This div must be placed immediately after the control sidebar --> <div class="control-sidebar-bg"></div> </div> <!-- ./wrapper --> <!-- REQUIRED JS SCRIPTS --> <!-- jQuery 3 --> <script src="/static/bower_components/jquery/dist/jquery.min.js"></script> <!-- Bootstrap 3.3.7 --> <script src="/static/bower_components/bootstrap/dist/js/bootstrap.min.js"></script> <!-- AdminLTE App --> <script src="/static/dist/js/adminlte.min.js"></script> <!-- Optionally, you can add Slimscroll and FastClick plugins. Both of these plugins are recommended to enhance the user experience. --> {#回傳參數至父層#} <script type="text/javascript"> var index = parent.layer.getFrameIndex(window.name); var success = {{ status }}; if ( success == '1' ) { parent.$("#handle_status").val('1'); parent.layer.close(index); } else if( success == '2' ) { parent.$("#handle_status").val('2'); parent.layer.close(index); } </script> </body> </html>
以上這篇對django layer彈窗組件的使用詳解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
