1. 一对一班级 模态增加 编辑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.shadow{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: black;
opacity: 0.4;
z-index: 999;
}
.modal{
z-index: 1000;
position: fixed;
left: 50%;
top: 50%;
height: 300px;
width: 400px;
background-color: white;
margin-left: -200px;
margin-top: -150px;
}
.del_class{
z-index: 1001;
position: fixed;
left: 50%;
top: 50%;
height: 150px;
width: 300px;
background-color: white;
margin-left: -150px;
margin-top: -75px;
}
.edit_class{
z-index: 1002;
position: fixed;
left: 50%;
top: 50%;
height: 150px;
width: 300px;
background-color: white;
margin-left: -150px;
margin-top: -75px;
}
</style>
</head>
<body>
<h1>班级列表</h1>
<div>
<a onclick="showModal();">模态框增加</a>
</div>
<table border="1px">
<thead>
<tr>
<td>ID</td>
<td>班级名称</td>
<td>模态操作</td>
</tr>
</thead>
<tbody>
{% for row in data %}
<tr>
<td>{{ row.cid }}</td>
<td>{{ row.title }}</td>
<td>
<a onclick="modelEdit(this)">编辑</a>
<a onclick="DelClass({{ row.cid }})">删除</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
{# 遮罩#}
<div id="shadow" class="shadow hide"></div>
{# 增加#}
<div id="addmodal" class="modal hide">
<p>班级名称:
<input id="addtitle" type="text" name="title" />
</p>
<input type="button" value="提交" onclick="AjaxSend();" /><span id="errormsg"></span>
<input type="button" value="取消" onclick="cancleModal();" />
</div>
{# 编辑#}
<div id="editModal" class="modal hide">
<h3>编辑</h3>
<input id="editId" type="text" name="id" style="display: none">
<p>班级名称<input id="editTitle" type="text" name="title" ></p>
<input type="button" value="提交" onclick="editAjaxSend()"><span id="errormsg"></span>
<input type="button" value="取消" onclick="cancleModal()">
</div>
<script src="/static/jquery-3.2.1.js"></script>
<script>
{# 增加#}
function showModal() {
$("#addmodal,#shadow").removeClass("hide");
}
function AjaxSend() {
title=$("#addtitle").val();
$.ajax({
url: ‘/motai_add_class/‘,
type: ‘POST‘,
data: {‘title‘: title},
success: function(arg){
arg = JSON.parse(arg);
if(arg.status){
location.reload();
}else{
alert(arg.message);
}
}
})
}
{# 编辑#}
function modelEdit(self) {
$("#editModal,#shadow").removeClass("hide");
var title=$(self).parent().prevAll().eq(0).text();
var id=$(self).parent().prevAll().eq(1).text();
$("#editTitle").val(title);
$("#editId").val(id);
}
function editAjaxSend() {
id = $("#editId").val();
title = $("#editTitle").val();
$.ajax({
url: ‘/modal_edit_class/‘,
type: ‘POST‘,
data: {"id":id,"title": title},
success: function(arg){
arg = JSON.parse(arg);
if(arg.status){
location.reload();
}else{
alert(arg.message);
}
}
})
}
{# 隐藏#}
function cancleModal() {
$("#shadow").addClass("hide");
$("#addmodal").addClass("hide");
$("#editModal").addClass("hide")
}
</script>
</body>
</html>
classes.html
def classes(request):
data = sqlheper.get_list("select cid,title from class",[])
return render(request, "classes.html", {"data": data})
def motai_add_class(request):
ret = {‘status‘: True, ‘message‘: None}
title = request.POST.get(‘title‘)
try:
nid = request.POST.get(‘nid‘)
content = request.POST.get(‘content‘)
sqlheper.motify_sql(‘insert into class(title) values(%s)‘,[title,])
except Exception as e:
ret[‘status‘] = False
ret[‘message‘] = "处理异常"
return HttpResponse(json.dumps(ret))
def modal_edit_class(request):
print(request.POST)
ret = {‘status‘: True, ‘message‘:None}
try:
id = request.POST.get(‘id‘)
title = request.POST.get(‘title‘)
sqlheper.motify_sql(‘update class set title=%s where cid=%s‘,[title,id,])
except Exception as e:
ret[‘status‘] = False
ret[‘message‘] = "处理异常"
return HttpResponse(json.dumps(ret))
views.py
时间： 2024-10-28 11:09:22