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="#">
            <button type="button" class="btn btn-default btn-sm" onclick="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 }}">
            <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 }}">上一页</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 }}">下一页</a>
        {% endif %}
           </span>
            <div class="pull-right">
                <a href="/linux_servers_add" 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">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="/static/bower_components/font-awesome/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="/static/bower_components/Ionicons/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="/static/dist/css/AdminLTE.min.css">
  <!-- 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">

  <!-- 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"
        href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</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>