<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/static/font-awesome-4.7.0/css/font-awesome.css">
<style>
.head{
width: 100%;
height: 40px;
background-color: dodgerblue;
}
.head1{
width: 70%;
height: 40px;
background-color: dodgerblue;
margin: 0 auto;
line-height: 40px;
}
.head1 span{
float: right;
padding-left: 10px;
padding-right: 10px;
margin-left: 20px;
background-color: lightskyblue;
text-align: center;
}
.head11 span:hover{
float: right;
background-color: blue;
}
.head11{
margin-top: 5px;
float: left;
}
.left_menu{
position: absolute;
width: 300px;
margin-left: 0;
top: 40px;
bottom: 0;
background-color: green;
}
.left_menu .menu1{
width: 100%;
height: 40px;
background-color: yellow;
color: black;
margin-top:10px ;
line-height: 40px;
text-align: center;
}
.left_menu .menu1:hover{
width: 100%;
height: 40px;
background-color: red;
color: white;
margin-top:10px ;
line-height: 40px;
text-align: center;
}
.content{
position: absolute;
overflow: auto;
left: 300px;
top: 40px;
right: 0;
bottom: 0;
background-color: cornsilk;
padding-left: 300px;
}
.hide{
display: none;
}
span{
background-color: yellow;
color: black;
}
span:hover{
background-color: red;
color: white;
}
.shade{
background-color: black;
opacity: 0.5;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
}
.add-modal{
position: fixed;
background-color: lightskyblue;
width: 500px;
height: 300px;
top: 35%;
left: 35%;
border: 2px solid red;
z-index: 11;
}
.adddata {
display: inline-block;
width: 100px;
height: 30px;
background-color: dodgerblue;
color: black;
}
.cancel{
display: inline-block;
width: 100px;
height: 30px;
background-color: dodgerblue;
color: black;
}
.edit{
background-color: lawngreen;
}
.manyspan {
border: 1px solid red;
}
.appdel{
border: 1px;
}
.appedit{
border: 1px;
}
option{
width: 150px;
}
</style>
</head>
<body style="margin: 0">
<div class="head">
<div class="head1">
<h3 class="head11">Automated test scheduling platform</h3>
<span>Contact me</span>
<span>Help</span>
</div></div>
<div class="left_menu">
<div con="con3" class="menu1">User Information</div>
<div con="con2" class="menu1">User Type</div>
<div con="con1" class="menu1">Host Type</div>
<div con="con4" class="menu1">Test Project</div>
<div con="con5" class="menu1">Host many-to-many</div>
</div>
<div >
<div id="con1" class="content">
{% include 'hostinfo.html' %}
</div>
<div id="con2" class="content hide">
{% include 'usertype.html' %}
</div>
<div id="con3" class="content hide">
{% include 'userinfo.html' %}
</div>
<div id="con4" class="content hide">
{% include 'testitem.html' %}
</div>
<div id="con5" class="content hide">
{% include 'manyToMany.html' %}
</div>
</div>
<div class="shade hide"></div>
<script src="/static/jquery.js"></script>
<script src="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script>
$(function () {
$('.menu1').click(function () {
var a = $(this).attr('con');
console.log(a);
$('#'+a).removeClass('hide').siblings().addClass('hide');
});
$('.adddata').click(function () {
$('.shade,.add-modal').removeClass('hide');
});
$('.cancel').click(function () {
$('.shade,.add-modal').addClass('hide');
});
$('#ajaxcommit').click(function () {
$.ajax({
url:"/hostApp/test_ajax",
type:"POST",
data:{'hostname':$('#envinfo').val(),
"ip":$("#ipinfo").val(),
"port":$("#portinfo").val(),
"usernameinfo":$("#usernameinfo").val(),
"passwordinfo":$("#passwordinfo").val(),
"iteminfo":$("#iteminfo").val(),
},
success:function (data) {
var dict = JSON.parse(data);
if(dict.status){
location.reload()
}else {
$('#error_msg').text(dict.error)
}
}
})
});
$("span[delid='delitem']").click(function () {
var hid =$(this).parent().parent().attr('hid');
$(this).parent().parent().remove();
$.ajax(
{
url: "/hostApp/test_ajax1",
type: "POST",
{# data: $('#add_form').serialize(),#}
data: {
'tablename': 'host',
'hid': hid
},
success: function (data) {
var dict = JSON.parse(data);
if (dict.status) {
console.log('success')
}
{# location.reload()#}
{# }else {#}
{# $('#error_msg').text(dict.error)#}
{# }#}
},
}
)
});
$(".edit").click(function () {
var hid =$(this).parent().parent().attr('hid');
var str="/hostApp/edit_data-"+hid;
location.href=str
});
$('#appinfocommit').click(function () {
$.ajax({
url:'/hostApp/many_to_many',
type:'POST',
data:$('#appaddform').serialize(),
dataType: 'JSON', // internal
traditional: true,
success:function (obj) {
alert('success');
location.reload()
}
})
});
$('#appinfoedit').click(function () {
console.log('wo yao kai shi xiu gai le ');
$.ajax({
url:'/hostApp/many_to_many_edit',
type:'POST',
data:$('#appeditform').serialize(),
dataType: 'JSON', // internal
traditional: true,
success:function (obj) {
alert('success');
location.reload()
}
})
});
$('.appdel').click(function () {
var appid =$(this).parent().parent().attr('appid');
$(this).parent().parent().remove();
$.ajax(
{
url: "/hostApp/test_ajax1",
type: "POST",
{# data: $('#add_form').serialize(),#}
data: {
'tablename': 'application',
'appid': appid
},
success: function (data) {
var dict = JSON.parse(data);
if (dict.status) {
console.log('success')
}
{# location.reload()#}
{# }else {#}
{# $('#error_msg').text(dict.error)#}
{# }#}
},
}
)
});
$('.appedit').click(function () {
$('#appedit').removeClass('hide');
var appname = $(this).parent().prev().prev().text();
var appid = $(this).parent().parent().attr('appid');
$('#appname_edit').val(appname);
var host_list_id = [];
$(this).parent().prev().children().each(
function () {
var hostid = $(this).attr('hostid');
host_list_id.push(hostid)
}
);
console.log(host_list_id);
$('#hostlist_edit').val(host_list_id);
{# .children().each(#}
{# function () {#}
{# if($(this)[0].selected){#}
{# $(this).css({"color": "#ff0011", "background": "blue"})#}
{# }else{#}
{# $(this).css({"color": "lawngreen", "background": "yellow"})#}
{# }#}
{# }#}
{# );#}
$('#appid').val(appid)
});
$ ('. fa, .fa-times'). click (function () {
var appid=$(this).parent().parent().parent().attr('appid');
var tdobj=$(this).parent().parent()
$(this).parent().remove();
var host_list_id = [];
tdobj.children().each(
function () {
var hostid = $(this).attr('hostid');
host_list_id.push(hostid)
}
);
$.ajax({
url:'/hostApp/many_to_many_edit',
type:'POST',
data:{
appid: appid,
hostlist:host_list_id
},
dataType: 'JSON', // internal
traditional: true
})
})
})
</script>
</body>
</html>
《many_to_many.html》
<input class="adddata" type="button" value="增加"/>
<table border="1">
<thread>
<tr>
<td>Business Name</td>
<td style="width: 400px">Host list</td>
<td>操作</td>
</tr>
</thread>
<tbody>
{% for row in appinfo %}
<tr appid="{{ row.id }}">
<td>
{{ row.name }}
</td>
<td>
{% for cow in row.r.all %}
<span hostid="{{ cow.id }}" class="manyspan">{{ cow.envid}}<a class="fa fa-times"></a></span>
{% endfor %}
</td>
<td><span class="appedit">编辑</span>|<span class="appdel">删除</span></td>
</tr>
{% endfor %}
</tbody>
</table>
<div style="z-index: 100" class="add-modal hide">
<form id="appaddform" action="/hostApp/many_to_many/">
<div><input id="appname" type="text" name="appname" placeholder="业务名称"> </div>
<div><select id="hostlist" name="hostlist" multiple>
{% for row in hostobj %}
<option value="{{ row.id }}">{{ row.envid }}</option>
{% endfor %}
</select> </div>
<div><input id="appinfocommit" type="button" value="ajax提交">
<input type="button" class="cancel" value="取消"></div>
<div id="error_msg" style="color: red"></div>
</form>
</div>
<div id='appedit' style="z-index: 99" class="add-modal hide">
<form id="appeditform" action="/hostApp/many_to_many/">
<div><input id="appid" type="text" name="appid" class="hide"> </div>
<div><input id="appname_edit" type="text" name="appname" placeholder="业务名称"> </div>
<div><select id="hostlist_edit" name="hostlist" multiple>
{% for row in hostobj %}
<option value="{{ row.id }}">{{ row.envid }}</option>
{% endfor %}
</select> </div>
<br/>
<br/>
<br/>
<div><input id="appinfoedit" type="button" value="保存更改">
<input type="button" class="cancel" value="取消"></div>
<div id="error_msg" style="color: red"></div>
</form>
</div>
《hostinfo.html》
{% extends 'master.html' %}
{% block title %}Host management{% endblock %}
{% block content1 %}
<input class="adddata" type="button" value="增加"/>
<table border="1">
<thread>
<tr >
<td>serial number</td>
<td>Environment ID</td>
<td>Ambient Address</td>
<td>Environment Port</td>
<td>Environment Username</td>
<td>Environment Password</td>
<td>Environmental Test Project</td>
<td>Environmental test version</td>
<td>操作</td>
</tr>
</thread>
<tbody>
{% for row in hostobj %}
<tr hid="{{ row.id }}" iid="{{ row.item.id }}">
<td>{{ forloop.counter }}</td>
<td>{{ row.envid }}</td>
<td>{{ row.ip }}</td>
<td>{{ row.port }}</td>
<td>{{ row.username }}</td>
<td>{{ row.password }}</td>
<td>{{ row.item.item }}</td>
<td>{{ row.item.versionNum }}</td>
<td><span class="edit">编辑</span>|<span delid="delitem" >删除</span></td>
{% endfor %}
</tr>
</tbody>
</table>
<div class="add-modal hide">
<form action="/hostApp/host/">
<div><input id="envinfo" type="text" name="envinfo" placeholder="环境信息"> </div>
<div><input id="ipinfo" type="text" name="ipinfo" placeholder="ip"> </div>
<div><input id="portinfo" type="text" name="portinfo" placeholder="端口"> </div>
<div><input id="usernameinfo" type="text" name="usernameinfo" placeholder="用户名"> </div>
<div><input id="passwordinfo" type="password" name="passwordinfo" placeholder="密码"> </div>
<div><select id="iteminfo" name="iteminfo">
{% for row in test_item_data %}
<option value="{{ row.id }}">{{ row.item }}</option>
{% endfor %}
</select> </div>
<div><input id="ajaxcommit" type="button"value="ajax提交"> <input type="button" class="cancel" value="取消"></div>
<div id="error_msg" style="color: red"></div>
</form>
</div>
{% endblock %}