Django中前端界面实现级联查询

Django前端界面实现级联查询

一、前端界面中

<span scope="col" colspan="6">
            院系：<select id="dept" name="deptid" class="select radius mr-10" style="width: 20%">
                <option value="default" >请选择院系</option>
                {% for dept in deptList %}
                    {% if deptid == dept.deptid %}
                        <option value="{{ dept.deptid }}" selected>{{ dept.deptname }}</option>
                    {% else %}
                        <option value="{{ dept.deptid }}">{{ dept.deptname }}</option>
                    {% endif %}
                {% endfor %}
            </select>
            专业：<select id="major" name="majorid" class="select radius mr-10" style="width: 20%">
                <option value="default" selected>请选择专业</option>
                {% for major in majorList %}
                    {% if majorid == major.majorid %}
                        <option value="{{ major.majorid }}" selected>{{ major.majorname }}</option>
                    {% else %}
                        <option value="{{ major.majorid }}">{{ major.majorname }}</option>
                    {% endif %}
                {% endfor %}
            </select>
        </span>

$(function () {
        // 改变院系后
        $('#dept').change(function () {
            var deptid = $("#dept").val();
            // 清空专业
            $("#major").empty().append('<option value="default">请选择专业</option>');
            var majorid = $("#major").val();
            // 跳转
            window.location.href="{% url 'basic:getGrade' %}?deptid="+deptid+"&majorid="+majorid
        });
        // 改变专业后
        $('#major').change(function () {
            var deptid = $("#dept").val();
            var majorid = $("#major").val();
            // 跳转
            window.location.href="{% url 'basic:getGrade' %}?majorid="+majorid+"&deptid="+deptid
        });
    })

二、views

def getGrade(request):
    '''
    获取到所有的班级信息(级联查询，应用分页)
    :param request:
    :return:
    '''
    deptid = request.GET.get('deptid')  # 获取级联菜单中的院系id
    majorid = request.GET.get('majorid')    # 获取级联菜单中的专业id
    current_page = request.GET.get('p', 1)
    current_page = int(current_page)  # 当前页
    depts = models.TDept.objects.all()  # 获取所有的院系信息
    deptList = []
    for dept in depts:
        major = models.TMajor.objects.filter(dept=dept)
        if major:
            deptList.append(dept)   # 获取到所有 有专业的 院系信息
    majors = []
    gradeList = []
    if deptid == 'default' or deptid is None and majorid == 'default' or majorid is None:   # 级联菜单无选项时
        gradeList = models.TGrade.objects.all().order_by('gradeid')
    elif deptid and majorid == 'default':
        gradeList = models.TGrade.objects.filter(major__dept__deptid=deptid)    # 级联菜单选择院系时
        majors = models.TMajor.objects.filter(dept=deptid)
    elif majorid:
        gradeList = models.TGrade.objects.filter(major__majorid=majorid)    # 级联菜单选择专业时
        majors = models.TMajor.objects.filter(dept=deptid)
    page_obj = pagination.Page(current_page, len(gradeList))  # 创建分页对象
    data_len = page_obj.data_count  # 获取总数据数量
    pages = page_obj.page_pages  # 获取总页数
    data = gradeList[page_obj.start:page_obj.end]  # 获取单页数据
    page_str = page_obj.page_str('/basic/getGrade')  # 传递base_url
    return render(request,'bg/basic/listgrade.html',
                  {'gradeList':data,'data_len':data_len,'pages':pages,'page_str':page_str,
                   'current_page':current_page,'deptList':deptList,'majorList':majors,
                   'deptid':deptid,'majorid':majorid})