Django之学员管理四
今天来讲解一下学员管理的多对多的后面的操作实现，分别是多对多的添加和编辑，以及多对多的ajax的添加和编辑操作。
在我们之前的三期的文章里，可以发现，这个学员管理，可以有很多的方向可以变化，最为明显的是后台管理平台。当然也可以是公司内网crm的部门管理小功能。但是，在这里，我们的方向，就要最终将这个学员管理慢慢完善成后台管理。
那么我们就来今天的内容，先来搞一搞多对多的添加。
多对多的添加操作：
多对多的添加操作要注意一点，就是在添加时，老师的名称是不应当是输入填写的，而是应该是在老师表里去获取。同样，授课班级的名称也不应该是输入的，也应该是去班级表里去获取，但问题是一个老师，是可以有多个授课班级的，所以，授课班级可以是多个，那么在前端如何实现，多选班级呐？我们来看一下具体代码实现，就知道啦！其实很简单，只有一个小小的属性而已。
前端 add_teacherandclass_add.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>添加老师任课班级</title> 6 </head> 7 <body> 8 <h2>添加老师任课班级</h2> 9 <form method="POST" action="/add_teacherandclass_add/"> 10 <p>老师姓名：<input type="text" name="name" placeholder="Teacher Name"></p> 11 <p>任课班级： 12 <select multiple size="5" name="classes_nids" > 13 {% for foo in class_list %} 14 <option value="{{ foo.nid }}">{{ foo.title }}</option> 15 {% endfor %} 16 </select> 17 </p> 18 <input type="submit" value="submit"> 19 </form> 20 </body> 21 </html>
view.py 视图函数 add_teacherandclass_add
1 def add_teacherandclass_add(request): 2 if request.method == "GET": 3 class_list = sqlheper.get_list("select nid,title from classes",[]) 4 return render(request, "add_teacherandclass_add.html",{"class_list":class_list}) 5 else: 6 name = request.POST.get("name") 7 #在老师表添加一条数据。 8 teacher_nid = sqlheper.create("insert into teacher(name) values(%s)",[name,]) 9 classes_nids = request.POST.getlist("classes_nids") #getlist 是获取多个值 10 print(classes_nids) 11 #在老师班级关系表，插入老师和班级的数据，一个老师会有多个班级，但一个老师和一个班级，依旧是一行数据 12 13 # 用循环实现插入功能 14 # for cls_id in classes_nids: 15 # print(cls_id) 16 # sqlheper.modify("insert into teacherandclasses(teacher_id,class_id) values(%s,%s)",[teacher_nid,cls_id]) 17 # print("1") 18 19 #连接一次，断一次，效率依旧不高 20 # obj = sqlheper.SqlHelper() 21 # print(obj) 22 # for cls_id in classes_nids: 23 # print(cls_id) 24 # obj.modify("insert into teacherandclasses(teacher_id,class_id) values(%s,%s)",[teacher_nid,cls_id]) 25 # obj.close() 26 27 #一次连接，一次提交，但提交了多条数据 28 data_list = [] 29 print(data_list) 30 for cls_id in classes_nids: 31 temp = (teacher_nid,cls_id,) 32 print(temp) 33 data_list.append(temp) 34 print(data_list) 35 obj = sqlheper.SqlHelper() 36 obj.multiple_modify('insert into teacherandclasses(teacher_id,class_id) values(%s,%s)',data_list) 37 obj.close() 38 return redirect('/teacherandclass/')
多对多的编辑操作：
在多对多的编辑中，需要注意的是，老师是有默认值的，老师的任课班级也是有的。在编辑时，老师的所任课班级是有默认值，但是在编辑时，任课班级应该是班级表的全部数据，因为需要修改任课班级，所以在这里需要拿取三个值。并且在修改时，是修改两张表，一张老师表，一张老师班级关系表。
前端 edit_teacherand_edit.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>编辑老师及任课班级</title> 6 </head> 7 <body> 8 <h2>编辑老师及任课班级</h2> 9 <form method="POST" action="/edit_teacherandclass_edit/?nid={{ teacher_info.nid }}"> 10 <p>老师姓名：<input type="text" name="name" value="{{ teacher_info.name }}" placeholder="Teacher Name"></p> 11 <p>任课班级： 12 <select multiple size="10" name="classes_nids" > 13 {% for item in classes_list %} 14 {% if item.nid in class_id_list %} 15 <option value="{{ item.nid }}" selected>{{ item.title }}</option> 16 {% else %} 17 <option value="{{ item.nid }}">{{ item.title }}</option> 18 {% endif %} 19 {% endfor %} 20 </select> 21 </p> 22 <input type="submit" value="submit"> 23 </form> 24 </body> 25 </html>
views.py 的视图函数 edit_teacherand_edit
1 def edit_teacherandclass_edit(request): 2 if request.method =="GET": 3 tid = request.GET.get("tid") 4 obj = sqlheper.SqlHelper() 5 teacher_info = obj.get_one("select nid,name from teacher where nid=%s",[tid]) 6 #拿取当前老师id 7 class_id_list = obj.get_list("select class_id from teacherandclasses where teacher_id=%s",[tid]) 8 #拿取老师所关联的班级id 9 classes_list = obj.get_list("select * from classes",[]) 10 obj.close() 11 temp = [] 12 for i in class_id_list: 13 temp.append(i["class_id"]) 14 # print("所有班级",classes_list) 15 return render(request,"edit_teacherandclass_edit.html",{ 16 "teacher_info":teacher_info, 17 "class_id_list":temp, 18 "classes_list":classes_list, 19 }) 20 else: 21 nid = request.GET.get("nid") 22 #这里的nid 用GET获取是因为edit_teacherandclass_edit的传参方式是在url传参的，因为url传参，参数自动放到GET里 23 #问题，班级的就是POST是因为班级的数据是用POST发送的，nid是在随form表单，以POST的形式发送的，但nid是在action的url中的，所以要单独用GET。 24 name = request.POST.get("name") 25 classes_nids = request.POST.getlist("classes_nids") 26 #更新老师表 27 obj = sqlheper.SqlHelper() 28 obj.modify("update teacher set name=%s where nid=%s",[name,nid]) 29 #更新老师班级关系表 30 #这里的方案是先把当前老师和班级的对应关系删除，然后在新添加 31 obj.modify("delete from teacherandclasses where teacher_id=%s",[nid]) 32 data_list = [] 33 print(data_list) 34 for cls_id in classes_nids: 35 temp = (nid, cls_id,) 36 print(temp) 37 data_list.append(temp) 38 print(data_list) 39 obj = sqlheper.SqlHelper() 40 obj.multiple_modify('insert into teacherandclasses(teacher_id,class_id) values(%s,%s)', data_list) 41 obj.close() 42 return redirect("/teacherandclass/")
多对多的删除操作：
有待添加！！！！
多对多的ajax的添加操作：
多对多的ajax添加操作，问题点在于要单次添加多个班级，同时要操作两张表，所以在ajax传值的地方，是需要注意的。
前端 teacherandclass.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>teacherandclass</title> 6 <style> 7 .hide{ 8 display: none; 9 } 10 .shadow{ 11 position: fixed; 12 left: 0; 13 top: 0; 14 right: 0; 15 bottom: 0; 16 background-color: black; 17 opacity: 0.4; 18 z-index: 999; 19 } 20 .loading{ 21 position: fixed; 22 width: 32px; 23 height: 32px; 24 left: 60%; 25 top: 60%; 26 margin-left: -16%; 27 margin-top: -16%; 28 background-image: url("/static/images/loading.gif"); 29 } 30 .modal{ 31 z-index: 1000; 32 position: fixed; 33 left: 50%; 34 top: 50%; 35 height: 300px; 36 width: 400px; 37 background-color: white; 38 margin-left: -200px; 39 margin-top: -150px; 40 } 41 </style> 42 </head> 43 <body> 44 <h1>老师和班级关系表</h1> 45 <div> 46 <a href="/add_teacherandclass_add/">添加老师任课班级</a> 47 | 48 <a id="btnAdd">对话框添加老师任课班级</a> 49 </div> 50 <table border="1"> 51 <thead> 52 <tr> 53 <th>ID</th> 54 <th>Teacher name</th> 55 <th>Class name</th> 56 <th>操作</th> 57 </tr> 58 </thead> 59 <tbody> 60 {% for foo in teacher_class_list %} 61 <tr> 62 <td>{{ foo.tid }}</td> 63 <td>{{ foo.name }}</td> 64 <td> 65 {% for item in foo.titles %} 66 <span style="display: inline-block;padding: 5px;border: 1px solid red;">{{ item }}</span> 67 {% endfor %} 68 </td> 69 <td> 70 <a href="/edit_teacherandclass_edit/?tid={{ foo.tid }}">Edit</a> 71 | 72 <a id="btnEdit">对话框编辑老师任课班级</a> 73 | 74 <a href="/del_teacherandclass_del/?tid={{ foo.tid }}">Delete</a> 75 </td> 76 </tr> 77 {% endfor %} 78 </tbody> 79 </table> 80 81 <div id="shadow" class="shadow hide"></div> 82 <div id="loading" class="loading hide"></div> 83 84 <div id="modal" class="modal hide"> 85 <p>添加老师：<input id="addName" type="text" name="name" placeholder="老师名称"></p> 86 <p>添加班级： 87 <select id="classIds" multiple size="10"></select> 88 </p> 89 <a id="addSubmit">submit</a> 90 <input type="button" value="cancel" onclick="cancleModal();"/><span id="errormsg"></span> 91 </div> 92 93 <script src="/static/jquery-1.12.4.js"></script> 94 <script> 95 $(function () { 96 btnAdd(); 97 btnAddSubmit(); 98 }); 99 100 function btnAdd() { 101 $("#btnAdd").click(function () { 102 $("#shadow,#loading").removeClass("hide"); 103 /* 104 发送ajax请求，获取所有班级信息 105 再classesIds下拉框中生成option所有的项目 106 */ 107 $.ajax({ 108 url:"/get_all_class/", 109 type:"GET", 110 dataType:"JSON", 111 success:function (arg) { 112 //这个arg是一个列表，列表里面是一个个的字典 113 console.log(arg); 114 //这个arg是字符串类型，并将所拿到是数据添加到select框里面，里面是一个一个的option 115 $.each(arg,function (i,row) { 116 var tag = document.createElement("option"); 117 tag.innerHTML = row.title; 118 tag.setAttribute("value",row.nid); 119 $("#classIds").append(tag); 120 121 }); 122 $("#loading").addClass("hide"); 123 $("#modal").removeClass("hide"); 124 //each是将arg循环，function是要被循环的项 125 } 126 }) 127 }) 128 } 129 130 function btnAddSubmit() { 131 $("#addSubmit").click(function () { 132 var name = $("#addName").val(); 133 var class_id_list = $("#classIds").val(); 134 console.log(name,class_id_list); 135 $.ajax({ 136 url:'/model_add_teacherandclass_ajax/', 137 type:"POST", 138 data:{"name":name,"class_id_list":class_id_list}, // 这里的class_id_list 由之前的字符串变成了列表 139 dataType:"JSON", 140 traditional:true, //这是将class_id_list不做处理，直接发给后台，这样后台就可以拿到列表的数据类型， 141 //如何提交的数据的值有列表，则需要添加此属性 142 success:function (arg) { 143 if (arg.status){ 144 location.reload(); 145 }else { 146 alert(arg.message); 147 } 148 } 149 }) 150 }) 151 } 152 </script> 153 </body> 154 </html>
后端 model_add_teacherandclass_ajax
1 def model_add_teacherandclass_ajax(request): 2 ret = {"status":True,"message":None} 3 try: 4 name = request.POST.get("name") 5 class_id_list = request.POST.getlist("class_id_list") 6 teacher_id = sqlheper.create("insert into teacher(name) values(%s)",[name,]) 7 data_list = [] 8 for cls_id in class_id_list: 9 temp = (teacher_id,cls_id) 10 data_list.append(temp) 11 obj = sqlheper.SqlHelper() 12 obj.multiple_modify("insert into teacherandclasses(teacher_id,class_id) values(%s,%s)",data_list) 13 obj.close() 14 except Exception as e: 15 ret["status"] = False 16 ret["message"] = "处理失败" 17 return HttpResponse(json.dumps(ret)) 18 19 def get_all_class(request): 20 import time 21 time.sleep(1) 22 obj = sqlheper.SqlHelper() 23 class_list = obj.get_list("select nid,title from classes",[]) 24 obj.close() 25 #return 返回的class_list 用json.dumps序列化一下 26 return HttpResponse(json.dumps(class_list))
多对多的ajax的编辑操作：
有待添加！！！！