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


Posted in Python onAugust 31, 2019

父层:

<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="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" 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弹窗组件的使用详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Python 相关文章推荐
python连接远程ftp服务器并列出目录下文件的方法
Apr 01 Python
python计算方程式根的方法
May 07 Python
详解Python自建logging模块
Jan 29 Python
Python八大常见排序算法定义、实现及时间消耗效率分析
Apr 27 Python
浅析Python 读取图像文件的性能对比
Mar 07 Python
Python通过TensorFlow卷积神经网络实现猫狗识别
Mar 14 Python
python使用HTMLTestRunner导出饼图分析报告的方法
Dec 30 Python
python集成开发环境配置(pycharm)
Feb 14 Python
Python request操作步骤及代码实例
Apr 13 Python
Python中常见的数制转换有哪些
May 27 Python
解决Python3.7.0 SSL低版本导致Pip无法使用问题
Sep 03 Python
用python获取txt文件中关键字的数量
Dec 24 Python
python2.7实现复制大量文件及文件夹资料
Aug 31 #Python
python3实现高效的端口扫描
Aug 31 #Python
python nmap实现端口扫描器教程
May 28 #Python
Python3多线程版TCP端口扫描器
Aug 31 #Python
简单了解python协程的相关知识
Aug 31 #Python
利用rest framework搭建Django API过程解析
Aug 31 #Python
Python进度条的制作代码实例
Aug 31 #Python
You might like
PHP XML数据解析代码
2010/05/26 PHP
PHP Directory 函数的详解
2013/03/07 PHP
PHP利用超级全局变量$_GET来接收表单数据的实例
2016/11/05 PHP
php实现网页端验证码功能
2017/07/11 PHP
php的RSA加密解密算法原理与用法分析
2020/01/23 PHP
删除重复数据的算法
2006/11/23 Javascript
通过DOM脚本去设置样式信息
2010/09/19 Javascript
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
JavaScript自执行闭包的小例子
2013/06/29 Javascript
jQuery中delegate()方法用法实例
2015/01/19 Javascript
Javascript 计算字符串在localStorage中所占字节数
2015/10/21 Javascript
javascript字符串函数汇总
2015/12/06 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
jQuery按需加载轮播图(web前端性能优化)
2017/02/17 Javascript
基于Angular.js实现的触摸滑动动画实例代码
2017/02/19 Javascript
Angular2.js实现表单验证详解
2017/06/23 Javascript
Web安全之XSS攻击与防御小结
2018/12/13 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
2019/04/17 Javascript
微信小程序系列之自定义顶部导航功能
2019/05/21 Javascript
了解重排与重绘
2019/05/29 Javascript
[01:54]TI4西雅图DOTA2选手欢迎晚宴 现场报道
2014/07/08 DOTA
[49:12]完美世界DOTA2联赛PWL S2 Magma vs GXR 第二场 11.29
2020/12/02 DOTA
使用Python下载歌词并嵌入歌曲文件中的实现代码
2015/11/13 Python
Python使用回溯法子集树模板解决爬楼梯问题示例
2017/09/08 Python
对python for 文件指定行读写操作详解
2018/12/29 Python
Python函数定义及传参方式详解(4种)
2019/03/18 Python
python中dict()的高级用法实现
2019/11/13 Python
Ubuntu中配置TensorFlow使用环境的方法
2020/04/21 Python
Python HTMLTestRunner库安装过程解析
2020/05/25 Python
办公室主任先进事迹
2014/01/18 职场文书
行政主管职责范本
2014/03/07 职场文书
主持人演讲稿
2014/05/13 职场文书
法人身份证明书
2014/10/08 职场文书
经典导游欢迎词
2015/01/26 职场文书
教师个人年终总结
2015/02/11 职场文书
地道战观后感400字
2015/06/04 职场文书