对django layer弹窗组件的使用详解

  <div class="col-xs-12">
   <div class="box">
   <div class="box-header">
    <h3 class="box-title">主机监控列表</h3>
   </div>
   <!-- /.box-header -->
   <div class="box-body" style="overflow: auto">
    <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 style="width: 10px"></th>
     <th style="width: 10px"></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" 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="" rel="external nofollow" >上一页</a>
  {% endif %}
  <span class="current">
   当前页{{ linuxs_servers.number }} 共计{{ linuxs_servers.paginator.num_pages }}
  </span>
  {% if linuxs_servers.has_next %}
   <a href="" 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"#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>

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

<!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="/UploadFiles/2021-04-08/html5shiv.min.js">

以上这篇对django layer弹窗组件的使用详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。