Django 中系别班级学生三级联动的实现与详解

在 Web 应用开发中，数据的层级关联展示十分常见。以学校管理系统为例，系别、班级、学生之间存在着明确的层级关系，通过实现三级联动功能，可以让用户在选择系别后，班级下拉框自动加载该系别的班级，选择班级后，学生下拉框再展示对应班级的学生，极大提升用户体验和数据筛选效率。本文将详细介绍如何在 Django 框架中实现这一功能。​

一、项目环境搭建​

在开始之前，确保已经安装好了 Django。如果没有安装，可以使用以下命令进行安装：​

pip install django

创建一个新的 Django 项目和应用：​

django-admin startproject three_level_linkage_project
cd three_level_linkage_project
python manage.py startapp school_app

将school_app添加到项目的settings.py文件中的INSTALLED_APPS列表里：​

INSTALLED_APPS = [
   ...
  'school_app',
   ...
]

二、数据库模型设计​

在school_app/models.py文件中定义系别、班级、学生对应的模型类，明确它们之间的外键关联关系。​

from django.db import models

class Department(models.Model):
    name = models.CharField(max_length=50, unique=True)

    def __str__(self):
        return self.name

class Class(models.Model):
    department = models.ForeignKey(Department, on_delete=models.CASCADE)
    name = models.CharField(max_length=50)

    def __str__(self):
        return f"{self.department.name} - {self.name}"

class Student(models.Model):
    class_info = models.ForeignKey(Class, on_delete=models.CASCADE)
    name = models.CharField(max_length=50)

    def __str__(self):
        return self.name

上述代码中，Class模型通过外键department关联Department模型，表示一个班级属于一个系别；Student模型通过外键class_info关联Class模型，表示一个学生属于一个班级。定义好模型后，执行数据库迁移命令：​

python manage.py makemigrations
python manage.py migrate

三、视图函数编写​

在school_app/views.py中编写视图函数，用于处理数据的获取和传递。这里我们使用基于函数的视图：​

from django.shortcuts import render
from.models import Department, Class, Student

def index(request):
    departments = Department.objects.all()
    selected_department_id = request.GET.get('department_id')
    selected_class_id = request.GET.get('class_id')

    classes = Class.objects.filter(department_id=selected_department_id) if selected_department_id else []
    students = Student.objects.filter(class_info_id=selected_class_id) if selected_class_id else []

    context = {
        'departments': departments,
        'classes': classes,
       'students': students,
       'selected_department_id': selected_department_id,
       'selected_class_id': selected_class_id,
    }
    return render(request,'school_app/index.html', context)

上述视图函数index获取所有系别数据，并根据前端传递过来的department_id和class_id参数，分别筛选出对应的班级和学生数据，最后将数据传递给模板。​

四、URL 配置​

在school_app/urls.py文件中配置 URL，将视图函数与 URL 进行映射：​

from django.urls import path
from. import views

urlpatterns = [
    path('', views.index, name='index'),
]

同时，在项目根目录的three_level_linkage_project/urls.py中包含school_app的 URL 配置：​

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('school_app.urls')),
]

五、前端模板编写​

在school_app/templates/school_app目录下创建index.html模板文件，用于展示三级联动的下拉框，并通过 JavaScript 实现联动效果。

    
    
    


    
系别班级学生三级联动
    
        请选择系别
        {% for department in departments %}
            {{ department.name }}
        {% endfor %}
    

    
        请选择班级
        {% for class_item in classes %}
            {{ class_item.name }}
        {% endfor %}
    

    
        请选择学生
        {% for student in students %}
            {{ student.name }}
        {% endfor %}
    

    

上述模板中，通过 Django 模板语法渲染系别下拉框的初始数据，然后使用 jQuery 监听department-select和class-select的change事件，通过 AJAX 请求获取对应的班级和学生数据，并更新相应的下拉框内容。​

六、功能测试

运行 Django 开发服务器：​

python manage.py runserver

在浏览器中访问http://127.0.0.1:8000/，选择系别后，班级下拉框会自动加载该系别的班级；选择班级后，学生下拉框会展示对应班级的学生，实现了三级联动效果。