对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实现抓取页面上链接的简单爬虫分享
Jan 21 Python
在IIS服务器上以CGI方式运行Python脚本的教程
Apr 25 Python
Python爬取三国演义的实现方法
Sep 12 Python
Python实现ssh批量登录并执行命令
Oct 25 Python
Python 爬虫图片简单实现
Jun 01 Python
Python3中的列表,元组,字典,字符串相关知识小结
Nov 10 Python
Python实现字符串匹配算法代码示例
Dec 05 Python
浅谈python numpy中nonzero()的用法
Apr 02 Python
Python实现接受任意个数参数的函数方法
Apr 21 Python
python爬虫 猫眼电影和电影天堂数据csv和mysql存储过程解析
Sep 05 Python
python 有效的括号的实现代码示例
Nov 11 Python
手把手教你安装Windows版本的Tensorflow
Mar 26 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使用COPY函数更新配置文件的方法
2015/06/18 PHP
mod_php、FastCGI、PHP-FPM等PHP运行方式对比
2015/07/02 PHP
WordPress中制作导航菜单的PHP核心方法讲解
2015/12/11 PHP
通过 Dom 方法提高 innerHTML 性能
2008/03/26 Javascript
jquery 打开窗口返回值实现代码
2010/03/04 Javascript
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
2010/09/12 Javascript
JQUERY dialog的用法详细解析
2013/12/19 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
2014/02/26 Javascript
JavaScript中模拟实现jsonp
2015/06/19 Javascript
javascript设计模式之对象工厂函数与构造函数详解
2015/07/30 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
详解node.js搭建代理服务器请求数据
2017/04/08 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
2017/04/25 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
2018/03/02 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
2019/11/05 Javascript
angular8和ngrx8结合使用的步骤介绍
2019/12/01 Javascript
element-ui如何防止重复提交的方法步骤
2019/12/09 Javascript
JS数组方法concat()用法实例分析
2020/01/18 Javascript
jquery实现两个div中的元素相互拖动的方法分析
2020/04/05 jQuery
elementui更改el-dialog关闭按钮的图标d的示例代码
2020/08/04 Javascript
[00:56]跨越时空加入战场 全新祈求者身心“失落奇艺侍祭”展示
2019/07/20 DOTA
python3调用百度翻译API实现实时翻译
2018/08/16 Python
python3.5 cv2 获取视频特定帧生成jpg图片
2019/08/28 Python
python中的TCP(传输控制协议)用法实例分析
2019/11/15 Python
python循环嵌套的多种使用方法解析
2019/11/29 Python
如何用 Python 制作 GitHub 消息助手
2021/02/20 Python
互动出版网:专业书籍
2017/03/21 全球购物
西班牙品牌鞋子、服装和配饰在线商店:Esdemarca
2021/02/17 全球购物
一组SQL面试题
2016/02/15 面试题
机电工程专业应届生求职信
2013/10/03 职场文书
工商管理系学生的自我评价分享
2013/11/29 职场文书
幼儿园亲子活动方案
2014/01/29 职场文书
高中生期中考试失利检讨书
2014/10/23 职场文书
2016年小学“感恩教师”主题队日活动总结
2016/04/01 职场文书
中国式结婚:司仪主持词(范文)
2019/07/25 职场文书
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS