对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性能提升之延迟初始化
Dec 04 Python
Python 实现购物商城,含有用户入口和商家入口的示例
Sep 15 Python
python 输出上个月的月末日期实例
Apr 11 Python
Python实现的从右到左字符串替换方法示例
Jul 06 Python
Sanic框架路由用法实例分析
Jul 16 Python
对python cv2批量灰度图片并保存的实例讲解
Nov 09 Python
python读取txt文件并取其某一列数据的示例
Feb 19 Python
Python pandas DataFrame操作的实现代码
Jun 21 Python
django使用django-apscheduler 实现定时任务的例子
Jul 20 Python
Keras-多输入多输出实例(多任务)
Jun 22 Python
python如何实现读取并显示图片(不需要图形界面)
Jul 08 Python
Python制作一个随机抽奖小工具的实现
Jul 07 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
将博客园(cnblogs.com)数据导入到wordpress的代码
2013/01/06 PHP
CI框架扩展系统核心类的方法分析
2016/05/23 PHP
Laravel框架Eloquent ORM删除数据操作示例
2019/12/03 PHP
Div自动滚动到末尾的代码
2008/10/26 Javascript
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
jQuery实战之品牌展示列表效果
2011/04/10 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
2011/11/30 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
2012/11/01 Javascript
javascript检测浏览器的缩放状态实现代码
2014/09/28 Javascript
Node.js事件循环(Event Loop)和线程池详解
2015/01/28 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
2016/05/20 Javascript
js的OOP继承实现(必看篇)
2017/02/18 Javascript
vue2的todolist入门小项目的详细解析
2017/05/11 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
2017/07/14 Javascript
浅谈nodejs中的类定义和继承的套路
2017/07/26 NodeJs
spirngmvc js传递复杂json参数到controller的实例
2018/03/29 Javascript
js实现弹幕飞机效果
2020/08/27 Javascript
[51:50]完美世界DOTA2联赛 Magma vs GXR 第一场 11.07
2020/11/10 DOTA
《Python之禅》中对于Python编程过程中的一些建议
2015/04/03 Python
Python为何不能用可变对象作为默认参数的值
2019/07/01 Python
8种常用的Python工具
2020/08/05 Python
python利用递归方法实现求集合的幂集
2020/09/07 Python
python爬虫爬取图片的简单代码
2021/01/18 Python
CSS3 简写animation
2012/05/10 HTML / CSS
伦敦的高级牛仔布专家:Trilogy
2018/08/06 全球购物
成人高等教育毕业生自我鉴定
2013/10/22 职场文书
食品营养与检测应届生求职信
2013/11/08 职场文书
会计找工作求职信范文
2013/12/09 职场文书
生物医学工程专业学生求职信范文分享
2013/12/14 职场文书
2014信息技术专业毕业生自我评价
2014/01/17 职场文书
幼儿园教师考核制度
2014/02/01 职场文书
银行类自荐信
2014/02/04 职场文书
总经理助理岗位职责范本
2014/07/20 职场文书
学习教师敬业奉献模范事迹材料思想汇报
2014/09/19 职场文书
销售区域经理岗位职责
2015/04/10 职场文书
解决thinkphp6(tp6)在状态码500下不报错,或者显示错误“Malformed UTF-8 characters”的问题
2021/04/01 PHP