对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?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="http://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>

 <script src="http://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

 <![endif]-->

 

 <!-- Google Font -->

 <link rel="stylesheet"

  href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic" 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弹窗组件的使用详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持中文源码网。