标签：hang click opened list row 数据 meta sel padding
前端：
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>
逻辑：
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="%s"selected>%s</option >‘ % (i.get("id"),i.get("id"),i.get("title")) 34 else: 35 html+=‘<option id=%s value="%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")
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()
标签：hang click opened list row 数据 meta sel padding
原文地址：http://www.cnblogs.com/sss4/p/7043445.html
