基于模态对话框学生管理系统

首页 > 代码库 > 基于模态对话框学生管理系统

基于模态对话框学生管理系统

2024-10-07 22:46:02 217人阅读

前端：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta harset="UTF-8">
  5     <title>模态对话框</title>
  6     <script src="/static/zhanggen.js"></script>
  7 </head>
  8 <body>
  9 <style>
 10     td{text-align: center;width:80px;height: 60px}
 11      .shadow{position: fixed;left: 0;right: 0;bottom: 0;top: 0;background-color:silver;z-index: 999;opacity: 0.4 }
 12      .add_modal{position: fixed;width: 250px;height: 225px; margin-top:30px;margin-left:520px;background-color:white;z-index: 1000}
 13      .haid{display: none}
 14      .del_modal{width: 150px;height:150px;z-index:1000;margin-left: 300px;position: fixed;left: 240px;top: 150px;text-align: center }
 15      .edit_modal{width: 300px;height:330px;background-color: silver;position:fixed;left: 240px;top:150px;text-align: center}
 16 
 17 </style>
 18 <table border="1" style="border:none">
 19     <tr>
 20          <td>学号</td>
 21          <td>姓名</td>
 22          <td>班级</td>
 23          <td colspan="3">模态对话框操作</td>
 24     </tr>
 25 
 26      {% for row in list %}
 27        </tr>
 28           <td>{{ row.id }}</td>
 29           <td>{{ row.name }}</td>
 30           <td>{{ row.title }}</td>
 31           <td><a href="#" onclick="show_modal()">添加</a></td>
 32           <td id="del_s"><a href="#" onclick="modal_del(this)">删除</a> </td>
 33           <td><a href="#"onclick="modal_edit(this)">编辑</a></td>
 34          </tr>
 35 
 36      {% endfor %}
 37 
 38 {#模态对话框的对遮罩层#}
 39 <div class="shadow haid" id="s"></div>
 40 
 41 {#增加的模特对话框#}
 42 <div class="add_modal haid" id="m">
 43      <p>姓名：<input type="text" id="name"></p>
 44      <div id="flage" style="color: red"></div>
 45      <p><input type="button"value="提交" onclick="modal_add()"></p>
 46      <p><input id="cancel" type="button"value="取消" onclick="cancel()"></p>
 47 </div>
 48 </table>
 49 
 50 {#删除的模态对话框#}
 51 <div id="del" class="del_modal haid"style="background-color:gray">
 52     <p>真的要删除吗？</p>
 53     <input id="y" style= "float: left; padding-left:10px;padding-right: 10px " type="button" value="确定">
 54     <input id="n" style=" float: right;padding-left: 10px;padding-right: 10px" type="button" value="取消">
 55 </div>
 56 
 57 
 58 {#编辑的模态对话框#}
 59 <div id="edit_mod" class="haid edit_modal">
 60    <p>ID：<input type="text" id="I"></p>
 61    <p>姓名：<input type="text" id="N"></p>
 62     <p>所属班级
 63              <select name="w" id="1993">
 64              </select>
 65     </p>
 66     <input id="1987" type="button" value="提交">
 67     <input type="button" value="取消" onclick="cancel()">
 68 </div>
 69 
 70 </body>
 71 
 72 
 73 
 74 
 75 <script>
 76 {#    添加操作，触发的模态对话框#}
 77 
 78     function show_modal() {
 79          document.getElementById("s").classList.remove("haid")
 80          document.getElementById("m").classList.remove("haid")
 81     }
 82 
 83 {#    取消按钮触发的事件 #}
 84     function cancel() {
 85         location.href="/modal/"
 86     }
 87 
 88 {#    添加操作触发ajax向服务端发数据#}
 89     function modal_add(){
 90         $.ajax({
 91             url:"/modal_add/",
 92             type:"POST",
 93             data:{‘name‘:$(‘#id‘).val(),"class_id":$(‘#name‘).val()},
 94             success:function(data){
 95                 console.log(data)
 96                 if (data=="no")
 97                 {$(‘#flage‘).text("用户名/密码错误")}
 98                 else{location.href="/modal/"}
 99                                  }})}
100 
101 {#删除操作 触发 模态对话框的 确认按钮 onclick事件 进而触发 ajanx请求服务端 #}
102     function modal_del(self) {
103         id1=$(self).parent().siblings().eq(0).text();
104         $("#del").removeClass("haid");
105         ele=document.getElementById("y");
106         ele.onclick=function () {
107             $.ajax({
108                  url: ‘/modal_del/‘,
109                  type: ‘POST‘,
110                  data:{"id":id1},
111                  success:function (data) {
112                        if (data == "OK"){location.href="/modal/"}
113                                           }
114             })}
115         ele1=document.getElementById("n");
116         ele1.onclick=function () {location.href="/modal/"} }
117 
118 function modal_edit(self) {
119        id=$(self).parent().siblings().eq(0).text();
120        name=$(self).parent().siblings().eq(1).text();
121        cid=$(self).parent().siblings().eq(2).text();
122         $("#edit_mod").removeClass("haid");
123         $(‘#I‘).val(id)
124         $(‘#N‘).val(name)
125         $.ajax({
126             url:‘/modal_edit/‘,
127             type:"POST",
128             data:{"id":id},
129             success:function(data){ $("#1993").html(data);
130             $(‘#edit_mod‘).removeClass("haid")}})
131 {#    给编辑对话栏的提交按钮动态添加事件#}
132           ele=document.getElementById("1987");
133           ele.onclick=function () { console.log("ok")
134           $.ajax({
135              url:‘/modal_edit/‘,
136              type:"GET",
137              data:{"id":($(‘#I‘).val()),"name":$(‘#N‘).val(),"class_id":$("#1993").val()},
138               success:function(data){
139                 console.log(data)
140                if (data==‘ok‘)
141                         {location.href="/modal/"}}})}
142          }
143 
144 </script>
145 
146 </html>

View Code

逻辑：

 1 from django.shortcuts import HttpResponse,render,redirect
 2 from until import mysqlhelper
 3 sql="select day64.student.id,day64.student.`name`,day64.class.title from day64.student LEFT JOIN day64.class on day64.student.class_id=day64.class.id"
 4 def modal(request):
 5     res=mysqlhelper.get_list(sql)
 6     return render(request,"modal.html",{"list":res})
 7 
 8 def modal_add(request):
 9     name=request.POST.get("class_id")
10     class_id=request.POST.get("name")
11     if len(name)==0 or len(class_id)==0:
12         return HttpResponse("no")
13     else:
14         sql="INSERT INTO day64.student(name,class_id) VALUES(%s,%s)"
15         mysqlhelper.moddify(sql,[name,class_id])
16         return HttpResponse("yes")
17 
18 def modal_del(request):
19     sid=request.POST.get("id")
20     mysqlhelper.moddify(‘delete from day64.student where id=%s‘,sid)
21     return HttpResponse("OK")
22 
23 def modal_edit(request):
24     if request.method==‘POST‘:
25             id1=request.POST.get("id")
26             res=mysqlhelper.get_one("SELECT class_id FROM student WHERE id=%s;",id1)
27             class_id=res.get(‘class_id‘)
28             sql="select * FROM day64.class"
29             res=mysqlhelper.get_list(sql)
30             html=""
31             for i in res:
32                 if i.get("id")==class_id:
33                     html += ‘<option id=%s value="http://www.mamicode.com/%s"selected>%s</option >‘ % (i.get("id"),i.get("id"),i.get("title"))
34                 else:
35                     html+=‘<option id=%s value="http://www.mamicode.com/%s">%s</option >‘% (i.get("id"),i.get("id"),i.get("title"))
36             return HttpResponse(html)
37     else:
38         id3=request.GET.get("id")
39         name=request.GET.get("name")
40         cid=request.GET.get("class_id")
41         sql="UPDATE day64.student SET name=%s,class_id=%s WHERE id=%s"
42         mysqlhelper.moddify(sql,[name,cid,id3])
43         return HttpResponse("ok")

View Code

 1 import pymysql
 2 def get_list(sql):
 3     conn = pymysql.connect(host="192.168.182.128", user="eric", password="123123", database="day64", charset="utf8")
 4     cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
 5     cursor.execute(sql)
 6     res = cursor.fetchall()
 7     cursor.close()
 8     conn.close()
 9     return res
10 
11 
12 def get_one(sql,args):
13     conn = pymysql.connect(host="192.168.182.128", user="eric", password="123123", database="day64", charset="utf8")
14     cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
15     cursor.execute(sql,args)
16     res = cursor.fetchone()
17     cursor.close()
18     conn.close()
19     return res
20 
21 def moddify(sql,args):
22     conn = pymysql.connect(host="192.168.182.128", user="eric", password="123123", database="day64", charset="utf8")
23     cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
24     cursor.execute(sql,args)
25     conn.commit()
26     cursor.close()
27     conn.close()

View Code

基于模态对话框学生管理系统

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > 基于模态对话框 学生管理系统

基于模态对话框 学生管理系统

看完仍有疑问？有类似问题直接问程序猿

首页 > 代码库 > 基于模态对话框学生管理系统

基于模态对话框学生管理系统