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})