JavaScript中按Student.Id分组并添加全选项的实现方法

问题描述 #

我从数据库获取了res.List数组，存储了所有记录信息。目前尝试用for循环处理数组，需要按Student.Id对记录分组，并在每组顶部添加带复选框的“全选学生”选项。现有代码片段、示例数据及期望结果如下：

现有代码 #

for(i=0;i<res.length;i++)
{
   res.List[i].Student.Id // 此处获取每条记录的ID
   // 需要为相同ID的记录组添加全选项，例如ID为1、5、7的各组都要添加
}

示例数据（res.List） #

>0
.School information : {RegId: 1,Name : "SJ"}
.ParentInfo : {Id:0,Name:"Abc"}
.Student : {Id:1,Name:"Student1"}

>1
.School information : {RegId: 1,Name : ""}
.ParentInfo : {Id:0,Name:""}
.Student : {Id:5,Name:"Student6"}

>2
.School information : {RegId: 1,Name : ""}
.ParentInfo : {Id:0,Name:""}
.Student : {Id:1,Name:"Student3"}

>3
.School information : {RegId: 1,Name : ""}
.ParentInfo : {Id:0,Name:""}
.Student : {Id:5,Name:"Student5"}

>4
.School information : {RegId: 1,Name : ""}
.ParentInfo : {Id:0,Name:""}
.Student : {Id:1,Name:"Student4"}

>5
.School information : {RegId: 1,Name : ""}
.ParentInfo : {Id:0,Name:""}
.Student : {Id:7,Name:"Student9"}

>6
.School information : {RegId: 1,Name : ""}
.ParentInfo : {Id:0,Name:""}
.Student : {Id:7,Name:"Student11"}

期望结果 #

<input type="checkbox"> 全选学生
Student1
Student3
Student4

<input type="checkbox"> 全选学生
Student5
Student6

<input type="checkbox"> 全选学生
Student9
Student11

解决方案 #

方法1：使用Map分组（高效简洁） #

先通过Map将相同Student.Id的学生归类，再遍历Map生成带全选选项的分组内容：

// 1. 按Student.Id分组，收集对应学生姓名
const grouped = new Map();
res.List.forEach(item => {
  const id = item.Student.Id;
  const name = item.Student.Name;
  if (!grouped.has(id)) {
    grouped.set(id, []);
  }
  grouped.get(id).push(name);
});

// 2. 生成带全选选项的结果
let output = '';
grouped.forEach(students => {
  // 添加组顶部的全选复选框
  output += `<input type="checkbox" onclick="toggleSelectAll(this)"> 全选学生\n`;
  // 添加组内所有学生
  students.forEach(name => {
    output += `${name}\n`;
  });
  // 组之间添加空行分隔
  output += '\n';
});

// 输出最终结果（去除末尾多余空行）
console.log(output.trim());

方法2：使用for循环实现（贴合你的初始思路） #

如果偏好使用for循环，需要先将数组按Student.Id排序，确保同组记录连续，再遍历判断组的切换：

// 1. 先按Student.Id排序，确保同ID记录连续
res.List.sort((a, b) => a.Student.Id - b.Student.Id);

let output = '';
let currentId = null;

// 2. 遍历数组生成分组
for (let i = 0; i < res.List.length; i++) {
  const item = res.List[i];
  const id = item.Student.Id;
  const name = item.Student.Name;

  // 切换到新组时，添加全选选项
  if (id !== currentId) {
    if (currentId !== null) {
      // 非首个组，先加空行分隔
      output += '\n';
    }
    output += `<input type="checkbox" onclick="toggleSelectAll(this)"> 全选学生\n`;
    currentId = id;
  }

  // 添加当前学生姓名
  output += `${name}\n`;
}

console.log(output.trim());

补充：全选复选框的联动逻辑（可选） #

如果需要实现点击“全选”时选中组内所有学生（假设后续会给学生项也加复选框），可以添加如下函数：

function toggleSelectAll(checkbox) {
  // 获取当前组内的所有学生复选框（需根据实际DOM结构调整选择器）
  const group = checkbox.parentElement;
  const studentCheckboxes = group.querySelectorAll('.student-checkbox');
  
  studentCheckboxes.forEach(cb => {
    cb.checked = checkbox.checked;
  });
}

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