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="#"> <button type="button" class="btn btn-default btn-sm" onclick="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 }}"> <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 }}">上一頁</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 }}">下一頁</a> {% endif %} </span> <div class="pull-right"> <a href="/linux_servers_add" 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">
<!-- Font Awesome -->
<link rel="stylesheet" href="/static/bower_components/font-awesome/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="/static/bower_components/Ionicons/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="/static/dist/css/AdminLTE.min.css">
<!-- 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">
<!-- 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">
</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彈窗元件使用
父層: <div class="col-xs-12"> <div class="box"> <div class="box-header"> <
layer彈窗第二個按鈕
icon title 千萬 組件 func 彈窗 function 哈哈 註意 layer彈窗組件,第二個按鈕是btn2,第三個按鈕是btn3。千萬別當成no了。哈哈。 layer.alert(‘確定刪除嗎?‘, { title: ‘提示‘, icon:
Thinkphp結合layer彈窗加ajax完成增刪改查方法
Thinkphp結合layer彈窗加ajax完成增加方法 給每個input框繫結id就行了 這是前端頁面 <!DOCTYPE html> <html> <head> {include file="public/head
使用layer彈窗提交表單時判斷表單是否輸入為空
使用layer彈窗提交表單時判斷表單是否輸入為空 獲得 layer 檔案包後,解壓並將 layer 整個資料夾(不要拆分結構) 存放到你專案的任意目錄,使用時,只需引入 layer.js 即可 使用時一定他要先引入jq1.8,或者以上版本!!! 下面是提交表單的實列
React彈窗元件
原文地址 小寒的部落格 這裡的彈窗泛指所有的彈出元件,這些元件不受頁面其他UI佈局影響,處於DOM結構的頂層,絕對定位在body元素下。 這個特殊性也給它的開發提出了特殊的要求。 react新版本中的createPortal Api可以很方便的製造一個元件到制定的dom裡
layer彈窗如何關閉並開啟新頁面-圖片地址找不到的情況下設定預設圖片
之前看一個同事每天寫部落格,對學習有很大幫助,所以想效仿一下,不求太多,但求自己所得的知識能記的更深刻一點。今天是第一次,不做太多內容,就分享一下幾個小的知識點,本篇部落格因為內容比較零散,所以會不定期更新,知識點已經記牢的童靴,請自行忽略。 一、layer彈窗
layer彈窗彈出位置不在瀏覽器視窗居中的問題的解決方法
問題描述: layer彈窗的彈出位置不在瀏覽器視口居中,而是根據頁面內容居中了,導致頁面內容很長時,看不到彈窗,滾動滾動條才能看到,通常情況下,這並不滿足需求。 解決方法: 使用parent.layer來呼叫彈窗,這樣,彈窗的位置就會相對於上一級的window定位,而不是當前所在的win
layer彈層元件的基本使用方法
提示: layer.msg(提示資訊, {time:1000, icon:5, shift:6}, 回撥方法); layer.alert(提示資訊, function(index){
有贊彈窗元件的bug處理
近期做小程式商城專案中引用了有讚的彈窗元件,出現兩個bug 滾動穿透 因為彈窗上面也有滾動事件,所以簡單地新增catchtouchmove並不能解決問題。解決方案,動態新增樣式類 .noScroll{ top:0px; left: 0px; width: 1
layer彈窗學習筆記
通過檢視官方文件,記錄下筆記 僅作為自己學習資料使用 layer彈出層: 作為獨立元件使用直接引入js。引入jQuery1.8以上的任意版本。 基礎引數 type: 0(資訊框,預設)1(頁面層)2(iframe層)3(載入層)4(tips層)。 title - 標題: 型別:S
layer 彈窗 載入層 選擇框
首先依賴jquery 1.alert layer.alert("顯示資訊"); // 最基本的 layer.alert("顯示資訊", { icon: 0 , // 0~6 t
從零開始徒手擼一個vue的toast彈窗元件
相信普通的vue元件大家都會寫,定義 -> 引入 -> 註冊 -> 使用,行雲流水,一氣呵成,但是如果我們今天是要自定義一個彈窗元件呢? 首先,我們來分析一下彈窗元件的特性(需求): 0. 輕量 –一個元件小於 1Kib (實際打包完不到0
6、用vue2.0extend寫alert模態框彈窗元件
通過Vue.extend建立元件構造器的方法寫彈窗元件 alert.js檔案程式碼 import Vue from 'vue' // 建立元件構造器 const alertHonor = Vue.extend(require('./alert.vue')); var cu
layer.close()或者layer.closeAll()失效的情況下強制關閉layer彈窗的方法
使用layer過程中有時會遇到close()或者closeAll方法失效 使用 下面方法可以強制關閉 //關閉layer func.layerCLose = function() {
關於jquery的彈窗元件簡單封裝
前言:由於自己工作時多數是基於移動端的頁面工程,很多時候都需要用到彈窗元件,網上也有很多好用,五花八門的彈窗外掛,但是由於網上各個版本有些功能過於強大,導致外掛大小比較大,有些樣式不好自己進行各種自定義設計,有些則是達不到自己想要的那種需求,比如實現彈窗按鈕的各
彈窗元件
function popUp(){ _this = this; } popUp.prototype = { init:function(){ _this.drag() _this.mark(); }, mark:function(){
關於layer彈窗取值問題簡談
記錄日常:最近在使用layer彈窗控制元件的過程中,發現使用$().val()無法獲取input的值。當時和同事試了網上的各種val()取值的方法以及查詢了網上的原因,發現網上沒有一個合適解決的方法以及合理的解釋,真的很苦惱。後來同事發現了一個辦法,可以獲取值,但是可能造成頁
layer彈窗內新增文字框
var awards = ""; function confirmUpdateAward(i) { layer.open({ type: 1, closeBtn: false, shift: 7, shadeClose: true,
談談layer彈窗自定義樣式,防止樣式衝突問題(實習第七天)
如果在一個頁面中存在兩個以上的layer彈窗,那麼當我們修改其中一個彈窗的預設樣式的話,其他的彈窗就會受到影響,今天就來談談怎麼樣去避免樣式衝突。 layer自定義彈窗樣式 問題情境: 在一個全域性頁面中存在多個layer.open({});
layer彈層元件1.8釋出
以打造國內最實用的彈層元件為使命的layer,正迎來了她誕生以來最盛大的更新:1.8 這是layer到目前為止最穩定和強健的版本,人性化的介面會帶領你體念形形色色的層之互動。 這一次,我們有足夠的信心說:layer正在走向完美的起點。 從1.7.0釋出以來,更多的人們開始熟