经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 程序设计 » Django » 查看文章
对django layer弹窗组件的使用详解
来源：jb51　　时间：2019/9/2 9:38:28　　对本文有异议

父层：

  1.   <div class="col-xs-12">
  2.    <div class="box">
  3.    <div class="box-header">
  4.     <h3 class="box-title">主机监控列表</h3>
  5.    </div>
  6.    <!-- /.box-header -->
  7.    <div class="box-body" style="overflow: auto">
  8.     <table id="example2" class="table table-bordered table-hover">
  9.     <thead>
  10.     <tr>
  11.      <th>ID</th>
  12.      <th>标签</th>
  13.      <th>IP地址</th>
  14.      <th>主机名</th>
  15.      <th>监控用户名</th>
  16.      <th>主机通断告警</th>
  17.      <th>CPU使用率告警</th>
  18.      <th>内存使用率告警</th>
  19.      <th>磁盘使用率告警</th>
  20.      <th style="width: 10px"></th>
  21.      <th style="width: 10px"></th>
  22.     </tr>
  23.     </thead>
  24.     {% for linux_server in linuxs_servers %}
  25.      <tr>
  26.      <td>{{ forloop.counter }} </td>
  27.       <td>{{ linux_server.tags}} </td>
  28.      <td>{{ linux_server.host}} </td>
  29.      <td>{{ linux_server.host_name}} </td>
  30.      <td>{{ linux_server.user}} </td>
  31.      <td align="center">{{ linux_server.connect_cn}} </td>
  32.      <td align="center">{{ linux_server.cpu_cn }} </td>
  33.      <td align="center">{{ linux_server.mem_cn }} </td>
  34.      <td align="center">{{ linux_server.disk_cn }} </td>
  35.      <td>
  36.     <div class="box-tools pull-right">
  37.     <a href="#" rel="external nofollow" >
  38.    <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>
  39.     </div>
  40.      </td>
  41.      <td>
  42.     <div class="box-tools pull-right">
  43.     <a href="/linux_servers_del?id={{ linux_server.id }}" rel="external nofollow" >
  44.    <button type="button" class="btn btn-default btn-sm"><i class="fa fa-trash-o"></i></button></a>
  45.     </div>
  46.      </td>
  47.      </tr>
  48.      {% endfor %}
  49.     </table>
  50.    </div>
  51.    <div class="box-footer clearfix">
  52.    <span class="step-links">
  53.   {% if linuxs_servers.has_previous %}
  54.    <a href="?page_linux={{ linuxs_servers.previous_page_number }}" rel="external nofollow" >上一页</a>
  55.   {% endif %}
  56.   <span class="current">
  57.    当前页{{ linuxs_servers.number }} 共计{{ linuxs_servers.paginator.num_pages }}
  58.   </span>
  59.   {% if linuxs_servers.has_next %}
  60.    <a href="?page_linux={{ linuxs_servers.next_page_number }}" rel="external nofollow" >下一页</a>
  61.   {% endif %}
  62.    </span>
  63.    <div class="pull-right">
  64.     <a href="/linux_servers_add" rel="external nofollow" class="btn btn-primary btn-block btn-flat">新增</a>
  65.     </div>
  66.    </div>
  67.    <!-- /.box-body -->
  68.    </div>
  69.    <!-- /.box -->
  70.   {#用于接收linux_server__edit.html中layui子层的传值#}
  71.   <input id="handle_status" value="" hidden="hidden">
  72.   </div>

点击编辑按钮，执行方法：

  1. <script>
  2. function pop(n){
  3.  layer.open({
  4.  type: 2,
  5.  title: '编辑主机信息',
  6.  closeBtn: 1,
  7.  area: ['700px', '550px'],
  8.  shadeClose: true, //点击遮罩关闭
  9.  content: ['/linux_servers_edit?id='+n,],
  10.  end:function(){
  11.    var handle_status = $("#handle_status").val();
  12.    if ( handle_status == '1' ) {
  13.     layer.msg('保存成功！',{
  14.      icon: 1,
  15.      time: 2000 //2秒关闭（如果不配置，默认是3秒）
  16.     },function(){
  17.      history.go(0);
  18.     });
  19.    } else if ( handle_status == '2' ) {
  20.     layer.msg('修改失败！',{
  21.      icon: 2,
  22.      time: 2000 //2秒关闭（如果不配置，默认是3秒）
  23.     },function(){
  24.      history.go(0);
  25.     });
  26.    }
  27.   }
  28.  });
  29. }
  30. </script>

--linux_server_edit编辑方法：

  1. @login_required(login_url='/login')
  2. def linux_servers_edit(request):
  3.  status = 0
  4.  rid = request.GET.get('id')
  5.  linux_server_edit = models_linux.TabLinuxServers.objects.get(id=rid)
  6.  if request.method == "POST":
  7.   if request.POST.has_key('commit'):
  8.    tags = request.POST.get('tags', None)
  9.    host_name = request.POST.get('host_name', None)
  10.    host = request.POST.get('host', None)
  11.    user = request.POST.get('user', None)
  12.    password = base64.encodestring(request.POST.get('password', None))
  13.    connect_cn = request.POST.get('connect', None)
  14.    connect = tools.isno(connect_cn)
  15.    cpu_cn = request.POST.get('cpu', None)
  16.    cpu = tools.isno(cpu_cn)
  17.    mem_cn = request.POST.get('mem', None)
  18.    mem = tools.isno(mem_cn)
  19.    disk_cn = request.POST.get('disk', None)
  20.    disk = tools.isno(disk_cn)
  21.    models_linux.TabLinuxServers.objects.filter(id=rid).update(tags=tags,host_name=host_name, host=host, user=user,
  22.                  password=password, connect_cn=connect_cn,
  23.                  connect=connect,
  24.                  cpu_cn=cpu_cn, cpu=cpu, mem_cn=mem_cn, mem=mem,
  25.                  disk_cn=disk_cn, disk=disk)
  26.    status = 1
  27.   elif request.POST.has_key('logout'):
  28.    logout(request)
  29.    return HttpResponseRedirect('/login/')
  30.  
  31.  return render_to_response('linux_servers_edit.html', {'linux_server_edit': linux_server_edit,'status':status})

对应的template

  1. <!DOCTYPE html>
  2. <!--
  3. This is a starter template page. Use this page to start your new project from
  4. scratch. This page gets rid of all links and provides the needed markup only.
  5. -->
  6. <html>
  7. <head>
  8.  <meta charset="utf-8">
  9.  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  10.  <title>DB monitor | Starter</title>
  11.  <!-- Tell the browser to be responsive to screen width -->
  12.  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  13.  <link rel="stylesheet" href="/static/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow" >
  14.  <!-- Font Awesome -->
  15.  <link rel="stylesheet" href="/static/bower_components/font-awesome/css/font-awesome.min.css" rel="external nofollow" >
  16.  <!-- Ionicons -->
  17.  <link rel="stylesheet" href="/static/bower_components/Ionicons/css/ionicons.min.css" rel="external nofollow" >
  18.  <!-- Theme style -->
  19.  <link rel="stylesheet" href="/static/dist/css/AdminLTE.min.css" rel="external nofollow" >
  20.  <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
  21.   page. However, you can choose any other skin. Make sure you
  22.   apply the skin class to the body tag so the changes take effect. -->
  23.  <link rel="stylesheet" href="/static/dist/css/skins/skin-blue.min.css" rel="external nofollow" >
  24.  
  25.  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  26.  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  27.  <!--[if lt IE 9]>
  28.  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  29.  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  30.  <![endif]-->
  31.  
  32.  <!-- Google Font -->
  33.  <link rel="stylesheet"
  34.   href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic" rel="external nofollow" >
  35. </head>
  36. <!--
  37. BODY TAG OPTIONS:
  38. =================
  39. Apply one or more of the following classes to get the
  40. desired effect
  41. |---------------------------------------------------------|
  42. | SKINS   | skin-blue        |
  43. |    | skin-black        |
  44. |    | skin-purple        |
  45. |    | skin-yellow        |
  46. |    | skin-red        |
  47. |    | skin-green        |
  48. |---------------------------------------------------------|
  49. |LAYOUT OPTIONS | fixed         |
  50. |    | layout-boxed       |
  51. |    | layout-top-nav       |
  52. |    | sidebar-collapse      |
  53. |    | sidebar-mini       |
  54. |---------------------------------------------------------|
  55. -->
  56. <body class="hold-transition skin-blue sidebar-mini">
  57. <div class="wrapper">
  58.  
  59.  
  60.  <!-- Content Wrapper. Contains page content -->
  61.  <div class="content-wrapper">
  62.  <!-- Content Header (Page header) -->
  63.  
  64.  <!-- Main content -->
  65.  <section class="content container-fluid">
  66.  
  67.   <!--------------------------
  68.   | Your Page Content Here |
  69.   -------------------------->
  70.   <!-- Main content -->
  71.  <section class="content">
  72.   <div class="row">
  73.   <div class="col-xs-12">
  74.   <div class="box box-solid">
  75.    <!-- form start -->
  76.    <form class="form-horizontal" action="" method="POST">
  77.     <div class="box-body">
  78.      <div class="form-group">
  79.      <label for="inputEmail3" class="col-sm-2 control-label">标签</label>
  80.      <div class="col-sm-10">
  81.      <input type="text" class="form-control" name="tags" value={{ linux_server_edit.tags }}>
  82.      </div>
  83.     </div>
  84.      <div class="form-group">
  85.      <label for="inputEmail3" class="col-sm-2 control-label">主机名</label>
  86.      <div class="col-sm-10">
  87.      <input type="text" class="form-control" name="host_name" value={{ linux_server_edit.host_name }}>
  88.      </div>
  89.     </div>
  90.      <div class="form-group">
  91.      <label for="inputEmail3" class="col-sm-2 control-label">主机IP</label>
  92.      <div class="col-sm-10">
  93.      <input type="text" class="form-control" name="host" value={{ linux_server_edit.host }}>
  94.      </div>
  95.     </div>
  96.      <div class="form-group">
  97.      <label for="inputEmail3" class="col-sm-2 control-label">监控用户名</label>
  98.      <div class="col-sm-10">
  99.      <input type="text" class="form-control" name="user" value={{ linux_server_edit.user }}>
  100.      </div>
  101.     </div>
  102.     <div class="form-group">
  103.      <label for="inputPassword3" class="col-sm-2 control-label">监控用户密码</label>
  104.      <div class="col-sm-10">
  105.      <input type="password" class="form-control" name="password" value={{ linux_server_edit.password }}>
  106.      </div>
  107.     </div>
  108.      <div class="form-group">
  109.      <label for="inputEmail3" class="col-sm-2 control-label">通断告警</label>
  110.      <div class="col-sm-10">
  111.      <input type="text" class="form-control" name="connect" value={{ linux_server_edit.connect_cn }}>
  112.      </div>
  113.     </div>
  114.      <div class="form-group">
  115.      <label for="inputEmail3" class="col-sm-2 control-label">CPU使用率告警</label>
  116.      <div class="col-sm-10">
  117.      <input type="text" class="form-control" name="cpu" value={{ linux_server_edit.cpu_cn }}>
  118.      </div>
  119.     </div>
  120.      <div class="form-group">
  121.      <label for="inputEmail3" class="col-sm-2 control-label">内存使用率告警</label>
  122.      <div class="col-sm-10">
  123.      <input type="text" class="form-control" name="mem" value={{ linux_server_edit.mem_cn }}>
  124.      </div>
  125.     </div>
  126.      <div class="form-group">
  127.      <label for="inputEmail3" class="col-sm-2 control-label">磁盘使用率告警</label>
  128.      <div class="col-sm-10">
  129.      <input type="text" class="form-control" name="disk" value={{ linux_server_edit.disk_cn }}>
  130.      </div>
  131.     </div>
  132.       <!-- /.box-body -->
  133.     <div class="box-footer">
  134.     <button type="submit" class="btn btn-info pull-right" name="commit">保存</button>
  135.     </div>
  136.     </div>
  137.     <!-- /.box-footer -->
  138.    </form>
  139.    </div>
  140.    <!-- /.box -->
  141.   </div>
  142.   <!-- /.col -->
  143.   </div>
  144.   <!-- /.row -->
  145.  </section>
  146.  </section>
  147.  <!-- /.content -->
  148.  </div>
  149.  <!-- /.content-wrapper -->
  150.  
  151.  <!-- Add the sidebar's background. This div must be placed
  152.  immediately after the control sidebar -->
  153.  <div class="control-sidebar-bg"></div>
  154. </div>
  155. <!-- ./wrapper -->
  156.  
  157. <!-- REQUIRED JS SCRIPTS -->
  158.  
  159. <!-- jQuery 3 -->
  160. <script src="/static/bower_components/jquery/dist/jquery.min.js"></script>
  161. <!-- Bootstrap 3.3.7 -->
  162. <script src="/static/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  163. <!-- AdminLTE App -->
  164. <script src="/static/dist/js/adminlte.min.js"></script>
  165.  
  166. <!-- Optionally, you can add Slimscroll and FastClick plugins.
  167.   Both of these plugins are recommended to enhance the
  168.   user experience. -->
  169. {#回传参数至父层#}
  170. <script type="text/javascript">
  171.   var index = parent.layer.getFrameIndex(window.name);
  172.   var success = {{ status }};
  173.   if ( success == '1' ) {
  174.    parent.$("#handle_status").val('1');
  175.     parent.layer.close(index);
  176.   } else if( success == '2' ) {
  177.    parent.$("#handle_status").val('2');
  178.    parent.layer.close(index);
  179.   }
  180. </script>
  181. </body>
  182. </html>

以上这篇对django layer弹窗组件的使用详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持w3xue。

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

Django热门文章

  • django-rest-framework 自定义swagger过程详解
  • 前后端分离实现注册+登录（Vue3.0 + Django3.2)
  • 详解Django CAS 解决方案
  • python+Django实现防止SQL注入的办法
  • django 配置阿里云OSS存储media文件的例子
  • 【django-vue】封装logger 封装全局异常 封装response 数据库配置 用户表继承AbstractUser配置
  • django使用ckeditor上传图片
  • Django集成富文本编辑器summernote的实现步骤
  • 使用django和vue进行数据交互的方法步骤
  • python3.8+django2+celery5.2.7环境准备(python测试开发django)

    • Django推荐文章

  • 探索Django：从项目创建到图片上传的全方位指南
  • Django国际化与本地化指南
  • CentOS+Django+uWSGI+Celery+Supervisor配置
  • vue3 + element-plus 的 upload + axios + django 文件上传并保存
  • Django学习(三) 之 模板中标签的使用
  • 前后端分离实现注册+登录（Vue3.0 + Django3.2)
  • Django笔记三十二之session登录验证操作
  • Django笔记三十之log日志记录详解
  • 【django-vue】封装logger 封装全局异常 封装response 数据库配置 用户表继承AbstractUser配置
  • Luffy项目：2、项目需求（2），项目库的创建，软件开发目录，Django配置文件介绍

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号