JavaScript：按ID分组列表并添加“全选”功能

本文旨在提供一种使用 JavaScript 对包含学生信息的列表进行分组，并为每个分组添加“全选”复选框功能的解决方案。通过使用 reduce 方法按 Student.Id 对数据进行分组，然后动态生成 HTML 结构，实现数据的可视化和交互。本文将提供详细的代码示例和解释，帮助开发者理解和应用该技术。

数据准备与分组

首先，我们需要一个包含学生信息的列表。假设我们有以下数据结构：

const res = { List:
[{"School information":{RegId: 1,Name : "SJ"},ParentInfo:{Id:0,Name:"Abc"},Student:{Id:1,Name:"Student1"}},
 {"School information":{RegId: 1,Name : ""},  ParentInfo:{Id:0,Name:""},   Student:{Id:5,Name:"Student6"}},
 {"School information":{RegId: 1,Name : ""},  ParentInfo:{Id:0,Name:""},   Student:{Id:1,Name:"Student3"}},
 {"School information":{RegId: 1,Name : ""},  ParentInfo:{Id:0,Name:""},   Student:{Id:5,Name:"Student5"}},
 {"School information":{RegId: 1,Name : ""},  ParentInfo:{Id:0,Name:""},   Student:{Id:1,Name:"Student4"}},
 {"School information":{RegId: 1,Name : ""},  ParentInfo:{Id:0,Name:""},   Student:{Id:7,Name:"Student9"}},
 {"School information":{RegId: 1,Name : ""},  ParentInfo:{Id:0,Name:""},   Student:{Id:7,Name:"Student11"}}]};

接下来，我们使用 reduce 方法根据 Student.Id 对数据进行分组。reduce 方法接受一个回调函数和一个初始值作为参数。回调函数接收累加器 a、当前值 c 和索引 i 作为参数。

const result = res.List.reduce((a,c,i)=>{
    (a[c.Student.Id]??=[]).push(c.Student.Name);
    return a;
},{});

这段代码的含义是：

东区网上书店

功能简介：多用户管理分权限发布、管理书籍资料。大类小类两级无限制软件分类、无限制添加书籍资料。资料批量删除、批量分类转移等批量管理功能。采用交互性的订单处理方式客户管理功能会员制度，分VIP会员和一般会员，并提供不同的优惠书本评论、管理功能。完善而方便的书籍资料添加、编辑表单，无组件图片上传。强大的搜索功能，可以按各个字段进行不同方式的高级搜索。付款方式管理网站后台管理员用户名和密码都是：admi

下载

立即学习“Java免费学习笔记（深入）”；

1. res.List.reduce((a, c, i) => { ... }, {}): 使用 reduce 方法遍历 res.List 数组。
2. a: 累加器，初始值为空对象 {}。它用于存储按 Student.Id 分组的结果。
3. c: 当前元素，即 res.List 中的一个对象。
4. i: 当前元素的索引。
5. (a[c.Student.Id] ??= []): 这部分代码是关键。它首先尝试访问累加器 a 中以 c.Student.Id 为键的属性。
   • 如果该属性不存在（即，之前没有遇到过这个 Student.Id），则使用空数组 [] 作为该属性的初始值，并将其赋值给 a[c.Student.Id]。 ??= 是空值合并赋值运算符，只有当左侧的值为 null 或 undefined 时，才会将右侧的值赋给左侧。
   • 如果该属性已经存在（即，之前已经遇到过这个 Student.Id），则直接使用该属性的值（一个数组）。
6. .push(c.Student.Name): 将当前学生的姓名 c.Student.Name 添加到对应 Student.Id 的数组中。
7. return a: 返回更新后的累加器 a，以便在下一次迭代中使用。

经过这段代码的处理，result 对象将包含按 Student.Id 分组的学生姓名列表。例如：

{
  "1": ["Student1", "Student3", "Student4"],
  "5": ["Student6", "Student5"],
  "7": ["Student9", "Student11"]
}

动态生成 HTML

接下来，我们需要将分组后的数据动态生成 HTML 结构，包括“全选”复选框和每个学生的复选框。

document.getElementById("container").innerHTML=
 Object.values(result).map(grp=>
 '
Select All Studentds 
'
 +grp.map(s=>`${s}`).join("
")+'
').join("");

这段代码的含义是：

立即学习“Java免费学习笔记（深入）”；

1. document.getElementById("container"): 获取 ID 为 "container" 的 HTML 元素。这个元素将用于显示生成的内容。
2. Object.values(result): Object.values() 方法返回一个数组，其中包含 result 对象的所有值（即，按 Student.Id 分组的学生姓名数组）。
3. .map(grp => ...): 对每个学生姓名数组（grp）进行映射，生成一个包含 HTML 结构的字符串。
   • '
     Select All Studentds
     ': 为每个分组创建一个 div 元素，并在其中添加一个 "Select All Studentds" 的标签和一个复选框。 这个复选框的 class 设置为 "group"，稍后将用于实现 "全选" 功能。
   • grp.map(s =>${s}).join("
     "): 对当前分组中的每个学生姓名 (s) 进行映射，生成一个包含复选框和学生姓名的标签。 然后使用
     将这些标签连接起来，形成一个垂直排列的列表。
   • '