欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Django 练习班级管理系统七 -- 编辑老师列表(二)

程序员文章站 2022-03-20 17:57:49
修改 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 %}

Django 练习班级管理系统七 -- 编辑老师列表(二)
Django 练习班级管理系统七 -- 编辑老师列表(二)