Django 练习班级管理系统七 -- 编辑老师列表(二)
程序员文章站
2022-06-24 11:29:25
修改 views.py 修改 edit_teacher.html ......
修改 views.py
@auth def edit_teacher(request, nid): if request.method == "get": obj = models.teacher.objects.get(id=nid) obj_cls_list = obj.cls.all().values_list('id', 'caption') # 三元运算,如果 obj_cls_list 为 true,则 list(zip(*obj_cls_list))[0],否则为 [] id_list = list(zip(*obj_cls_list))[0] if obj_cls_list else [] # 获取 id 不在 id_list 的值 cls_list = models.classes.objects.exclude(id__in=id_list) return render(request, 'edit_teacher.html', {'obj': obj, 'id_list': id_list, 'cls_list': cls_list, 'obj_cls_list': obj_cls_list}) elif request.method == "post": name = request.post.get('name') cls_li = request.post.getlist('cls') obj = models.teacher.objects.get(id=nid) obj.name = name obj.save() obj.cls.set(cls_li) return redirect('/teacher.html')
修改 edit_teacher.html
{% extends "layout.html" %} {% block css %} {% endblock %} {% block content %} <h1>编辑老师</h1> <form action="/edit_teacher-{{ obj.id }}.html" method="post"> <input style="display: none" type="text" id="nid" value="{{ obj.id }}" /> <p> 老师姓名: <input type="text" name="name" value="{{ obj.name }}" /> </p> <p> 已管理班级: <select id="sel" name="cls" multiple> <!-- obj_cls_list 可能取的值:<queryset [(2, '全栈二班'), (118, '全栈一班101'), (119, '全栈6班1'), (120, '全栈一班77')]> --> {% for row in obj_cls_list %} <option value="{{ row.0 }}">{{ row.1 }}</option> {% endfor %} </select> 未管理班级: <select id="none" multiple> <!-- cls_list 可能取的值:<queryset [<classes: classes object (1)>, <classes: classes object (3)>..... --> {% for row in cls_list %} <option value="{{ row.id }}">{{ row.caption }}</option> {% endfor %} </select> </p> <div> <a id="removecls"> >> </a> <a id="addcls"> << </a> </div> <input id="submit_form" type="submit" value="提交"> </form> {% endblock %} {% block js %} <script> $(function () { $('#menu_teacher').addclass('active'); bindremovecls(); bindaddcls(); bindsubmitform(); }) function bindremovecls() { $('#removecls').click(function () { // 获取 dom 对象 var options = $('#sel')[0].selectedoptions; console.log(options) while (options.length>0){ // 获取 jquery 对象 $(options[0]).appendto('#none'); } }) } function bindaddcls() { $('#addcls').click(function () { var options = $('#none')[0].selectedoptions; while (options.length>0){ $(options[0]).appendto('#sel'); } }) } function bindsubmitform() { $('#submit_form').click(function () { // 让 select 全选中 // each() 方法规定为每个匹配元素规定运行的函数。 $('#sel').children().each(function () { // prop() 方法设置或返回被选元素的属性和值。 $(this).prop('selected', true) }) }) } </script> {% endblock %}