对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中字典和JSON互转操作实例
Jan 19 Python
Python二分查找详解
Sep 13 Python
Windows下Python2与Python3两个版本共存的方法详解
Feb 12 Python
Python实现的摇骰子猜大小功能小游戏示例
Dec 18 Python
对python sklearn one-hot编码详解
Jul 10 Python
Django如何自定义分页
Sep 25 Python
django+mysql的使用示例
Nov 23 Python
将pip源更换到国内镜像的详细步骤
Apr 07 Python
python数据类型之间怎么转换技巧分享
Aug 20 Python
pytorch之ImageFolder使用详解
Jan 06 Python
Python操作word文档插入图片和表格的实例演示
Oct 25 Python
基于OpenCV的网络实时视频流传输的实现
Nov 15 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
一个MYSQL操作类
2006/11/16 PHP
谈谈新手如何学习PHP 默默经典版本
2009/08/04 PHP
PHP设计模式之命令模式的深入解析
2013/06/13 PHP
PHP 极验验证码实例讲解
2016/09/29 PHP
centos+php+coreseek+sphinx+mysql之一coreseek安装篇
2016/10/25 PHP
php生出随机字符串
2017/07/06 PHP
基于jquery创建的一个图片、视频缓冲的效果样式插件
2012/08/28 Javascript
js数组操作常用方法
2014/05/08 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
2015/05/06 Javascript
JS常用正则表达式总结【经典】
2017/05/12 Javascript
javaScript和jQuery自动加载简单代码实现方法
2017/11/24 jQuery
Angular实现点击按钮后在上方显示输入内容的方法
2017/12/27 Javascript
webpack打包node.js后端项目的方法
2018/03/10 Javascript
在Vue methods中调用filters里的过滤器实例
2018/08/30 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
2018/11/04 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
2019/06/11 Javascript
vue router动态路由设置参数可选问题
2019/08/21 Javascript
axios如何利用promise无痛刷新token的实现方法
2019/08/27 Javascript
转换layUI的数据表格中的日期格式方法
2019/09/19 Javascript
跟老齐学Python之类的细节
2014/10/13 Python
用Python编写分析Python程序性能的工具的教程
2015/04/01 Python
python matplotlib中文显示参数设置解析
2017/12/15 Python
Python实现的朴素贝叶斯算法经典示例【测试可用】
2018/06/13 Python
详解python和matlab的优势与区别
2019/06/28 Python
numpy.meshgrid()理解(小结)
2019/08/01 Python
python的命名规则知识点总结
2019/10/04 Python
python tkinter之 复选、文本、下拉的实现
2020/03/04 Python
详解用python -m http.server搭一个简易的本地局域网
2020/09/24 Python
浅析两列自适应布局的3种思路
2016/05/03 HTML / CSS
canvas粒子动画背景的实现示例
2018/09/03 HTML / CSS
韩国CJ食品专卖网:CJonmart
2016/09/11 全球购物
李维斯牛仔裤荷兰官方网站:Levi’s NL
2020/08/23 全球购物
璀璨的珍珠、密钉和个性化珠宝:Lily & Roo
2021/01/21 全球购物
治安消防安全责任书
2014/07/23 职场文书
2015世界地球日活动总结
2015/02/09 职场文书
导游词之镜泊湖
2019/12/09 职场文书