使用JavaScript获取表格选中行ID 实现Django学生批量分配教师

1. 调整urls.py #

新增批量更新教师的路由，原有单条更新路由可保留不影响历史逻辑：

path('student/add_teacher/<int:id>/', views.add_teacher),
# 新增批量操作路由
path('student/batch_add_teacher/', views.batch_add_teacher)

2. 调整views.py #

新增批量处理视图，使用ORM批量更新方法减少数据库操作次数，提升效率：

from django.http import JsonResponse

def add_teacher(request, id):
    student = Student.objects.get(pk=id)
    student.teacher = request.user.name
    student.save()
    return HttpResponseRedirect(f'/student/')

# 新增批量处理方法
def batch_add_teacher(request):
    if request.method == "POST":
        # 获取前端传递的选中学生ID列表
        student_ids = request.POST.getlist('student_ids[]')
        # 批量更新教师字段
        Student.objects.filter(id__in=student_ids).update(teacher=request.user.name)
        return JsonResponse({"status": "success"})

3. 调整student_list.html #

给复选框补充ID属性，页面添加CSRF校验标识：

<!-- 页面任意位置添加CSRF令牌，用于POST请求校验 -->
{% csrf_token %}
<table id="student-list" class="maintable">
        <thead>
           <tr>
              <th>Name</th>
              <th>Age</th>
              <th>Register date</th>
              <th>Select</th>
          </tr>
        </thead>
        <tbody>
          {% for student in student %}
          <tr class="text-black tr-hover table-link text-center student" student-id="{{ student.id }}">
             <td>{{ student.name }}</td>
             <td>{{ student.age }}</td>
             <td>{{ student.register_date }}</td>
             <!-- 给复选框添加value存储学生ID -->
             <td><input type="checkbox" class="student-checkbox" value="{{ student.id }}"></td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      <button type="button" class="btn btn-secondary addteacher">Update Teacher</button>

4. 调整student_function.js #

收集所有选中的学生ID，发起POST请求完成批量操作：

$(function () {
        $('button.addteacher').click(function (e) {
        // 收集所有选中的学生ID
        let selectedIds = [];
        $(".maintable input:checked").each(function() {
            selectedIds.push($(this).val())
        })
        // 未选中学生时提示
        if (selectedIds.length === 0) {
            alert("请先选择要操作的学生")
            return
        }
        var updateTeacher = confirm("업데이트하시겠습니까?");
        if (updateTeacher) {
            $.post('/student/batch_add_teacher/', {
                "student_ids[]": selectedIds,
                "csrfmiddlewaretoken": $("[name=csrfmiddlewaretoken]").val()
            }, function(res) {
                // 更新成功后刷新列表页
                window.location.href = '/student/'
            })
        }
    });
});

内容的提问来源于stack exchange，提问作者leesuccess