<!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">自动化测试调度平台</h3> ???????<span>联系我</span> ???????<span>帮助</span> ???</div></div><div class="left_menu"> ???<div con="con3" class="menu1">用户信息</div> ???<div con="con2" class="menu1">用户类型</div> ???<div con="con1" class="menu1">主机类型</div> ???<div con="con4" class="menu1">测试项目</div> ???<div con="con5" class="menu1">主机多对多</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‘, // 内部 ???????????????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‘, // 内部 ???????????????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‘, // 内部 ???????????????traditional: true ???????????}) ???????}) ???????}) ???</script></body></html>《many_to_many.html》
<input class="adddata" type="button" value="增加"/> ???<table border="1"> ???<thread> ???????<tr> ???????????<td>业务名称</td> ???????????<td style="width: 400px">主机列表</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 %}主机管理{% endblock %}{% block content1 %} ???<input class="adddata" type="button" value="增加"/> ???<table border="1"> ???<thread> ???????<tr > ???????????<td>序号</td> ???????????<td>环境标识</td> ???????????<td>环境地址</td> ???????????<td>环境端口</td> ???????????<td>环境用户名</td> ???????????<td>环境密码</td> ???????????<td>环境测试项目</td> ???????????<td>环境测试版本</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 %}
【主机管理项目】-（html文件源码，ajax的使用,模板导入与继承）
原文地址：https://www.cnblogs.com/qiangayz/p/8996839.html