zoukankan      html  css  js  c++  java
  • Django 练习班级管理系统七 -- 编辑老师列表(二)

    修改 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 %}
    
    


  • 相关阅读:
    155. 最小栈
    160. 相交链表
    PAT 1057 Stack
    PAT 1026 Table Tennis
    PAT 1017 Queueing at Bank
    PAT 1014 Waiting in Line
    PAT 1029 Median
    PAT 1016 Phone Bills
    PAT 1010 Radix
    PAT 1122 Hamiltonian Cycle
  • 原文地址:https://www.cnblogs.com/klvchen/p/11165015.html
Copyright © 2011-2022 走看看