对django layer弹窗组件的使用详解
作者:bitko 发布时间:2021-09-08 00:09:38
标签:django,layer,弹窗,组件
父层:
<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>
来源:https://blog.csdn.net/gumengkai/article/details/84189160
0
投稿
猜你喜欢
- PHP 过滤器PHP 过滤器用于验证和过滤来自非安全来源的数据,比如用户的输入。什么是 PHP 过滤器PHP 过滤器用于验证和过滤来自非安全
- 1 。打开您的Microsoft Visual Basic:点击确定,以下就按照蓝色的数字步骤.2 。修改工程名和类模块的名称:
- 前言在开发工作中,我们经常需要用到日期与时间,如:作为日志信息的内容输出计算某个功能的执行时间用日期命名一个日志文件的名称记录或展示某文章的
- 最近在研究品牌如何演绎,当然,看的时候没有忘记本行,分析了一下他们的交互设计~~路易威登LV上图采用胶片展示多组信息——大片展示品牌渲染。利
- 1. 功能说明,在页面使用smarty循环100次输出,类似for循环100次{section name=total loop=100}{$
- 1、模拟退火算法退火是金属从熔融状态缓慢冷却、最终达到能量最低的平衡态的过程。模拟退火算法基于优化问题求解过程与金属退火过程的相似性,以优化
- 1、给滚动条换色 好多网站的滚动条不是系统默认的灰色,而是一些红色、蓝色的,请问这是如何做的?答:这个很好实现,插入下面的代码:<&n
- 这个翻滚代码没有使用什么marquee或者其它位移方法,而是每隔一秒把列表最顶端的那个li删掉,把这个li里面的内容插入到最底端新生成的li
- 下面示例代码是防止用网页刷新过快,如果多个页面使用,最好将<%...%>代码存为一个asp文件,在需要的页面最前面include
- 话不多说,请看代码:<?phpdate_default_timezone_set("PRC"); error_re
- 照例使用XMLhttp同步方式获取数据,可是由于网络不稳定,经常造成'死锁'状况,既send之后一直不返回服务器结果,也不出
- 把程序重新写了一遍,日期下拉选择器,可自定义日期范围。使用了一个技巧获取指定月份的天数。演示页面:DateSelector.htm 程序代码
- 本文实例讲述了php广告加载类的用法,非常实用。分享给大家供大家参考。具体方法如下:该php广告加载类,支持异步与同步加载。需要使用Jque
- <script> Function.prototype.$bind=function(object) {  
- 1. 游戏是更注重于体验的产品,所以应该将游戏本省做得更加炫动和增加参与感觉。2. 网络游戏和单击游戏的区别在于社会化的添加,所以运用好这样
- RSS是 Really Simple Syndication的缩写(对rss2.0而言,是这三个词的缩写,对rss1.0而言则是RDF Si
- win7 +Navicat Lite 9+ VMware7在VMware中安装openSUSE11.x mysql5 Navicat Lit
- 如何同时处理数据库和页面错误? If Err.Number = 0 And ob
- 使用css2.1实现多重背景、多重边框效果在单个HTML元素上利用CSS2.1实现拥有3张背景图片和2张内容图效果,或者多重边框的效果。这种
- 用mysqldump和source可以使用这种方式导出数据:mysqldump -urott -P5678 --default-charac