本文旨在提供一种使用 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;},{});
这段代码的含义是：
立即学习“Java免费学习笔记（深入）”；
res.List.reduce((a, c, i) => { … }, {}): 使用 reduce 方法遍历 res.List 数组。a: 累加器，初始值为空对象 {}。它用于存储按 Student.Id 分组的结果。c: 当前元素，即 res.List 中的一个对象。i: 当前元素的索引。(a[c.Student.Id] ??= []): 这部分代码是关键。它首先尝试访问累加器 a 中以 c.Student.Id 为键的属性。如果该属性不存在（即，之前没有遇到过这个 Student.Id），则使用空数组 [] 作为该属性的初始值，并将其赋值给 a[c.Student.Id]。 ??= 是空值合并赋值运算符，只有当左侧的值为 null 或 undefined 时，才会将右侧的值赋给左侧。如果该属性已经存在（即，之前已经遇到过这个 Student.Id），则直接使用该属性的值（一个数组）。.push(c.Student.Name): 将当前学生的姓名 c.Student.Name 添加到对应 Student.Id 的数组中。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=> '
' +grp.map(s=>``).join("
")+'').join("");
这段代码的含义是：
立即学习“Java免费学习笔记（深入）”；
document.getElementById(“container”): 获取 ID 为 “container” 的 HTML 元素。这个元素将用于显示生成的内容。Object.values(result): Object.values() 方法返回一个数组，其中包含 result 对象的所有值（即，按 Student.Id 分组的学生姓名数组）。.map(grp => …): 对每个学生姓名数组（grp）进行映射，生成一个包含 HTML 结构的字符串。’
‘: 为每个分组创建一个 div 元素，并在其中添加一个 “Select All Studentds” 的标签和一个复选框。 这个复选框的 class 设置为 “group”，稍后将用于实现 “全选” 功能。grp.map(s =>).join(“
“): 对当前分组中的每个学生姓名 (s) 进行映射，生成一个包含复选框和学生姓名的标签。 然后使用
将这些标签连接起来，形成一个垂直排列的列表。’
‘: 关闭 div 元素。.join(“”): 将所有生成的 HTML 字符串连接成一个完整的字符串。document.getElementById(“container”).innerHTML = …: 将生成的 HTML 字符串设置为 “container” 元素的 innerHTML，从而将内容显示在页面上。
实现“全选”功能
最后，我们需要实现“全选”功能，即点击“全选”复选框时，选中或取消选中该组的所有学生复选框。
document.querySelectorAll(".group").forEach(cb=> cb.addEventListener("click",()=>cb.closest("div").querySelectorAll(" [type=checkbox]").forEach(c=>c.checked=cb.checked)))
这段代码的含义是：
立即学习“Java免费学习笔记（深入）”；
document.querySelectorAll(“.group”): 获取所有 class 为 “group” 的元素（即，所有的 “全选” 复选框）。.forEach(cb => …): 遍历每个 “全选” 复选框 (cb)。cb.addEventListener(“click”, () => …): 为每个 “全选” 复选框添加一个点击事件监听器。cb.closest(“div”): 找到当前 “全选” 复选框 (cb) 最近的父级 div 元素。 这个 div 包含了当前分组的所有学生复选框。cb.closest(“div”).querySelectorAll(” [type=checkbox]”): 在当前分组的 div 元素中，找到所有类型为 “checkbox” 的元素（包括 “全选” 复选框和学生复选框）。.forEach(c => c.checked = cb.checked): 遍历当前分组的所有复选框 (c)，并将它们的 checked 属性设置为与 “全选” 复选框 (cb) 的 checked 属性相同的值。 这样，当点击 “全选” 复选框时，该组的所有复选框都会被选中或取消选中。
完整代码示例
JavaScript Grouping and Select All 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"}}]}; const result = res.List.reduce((a,c,i)=>{ (a[c.Student.Id]??=[]).push(c.Student.Name); return a; },{}); document.getElementById("container").innerHTML= Object.values(result).map(grp=> '').join(""); document.querySelectorAll(".group").forEach(cb=> cb.addEventListener("click",()=>cb.closest("div").querySelectorAll(" [type=checkbox]").forEach(c=>c.checked=cb.checked)))
' +grp.map(s=>``).join("
")+'
这段代码将生成一个包含分组学生列表和“全选”功能的 HTML 页面。
注意事项
确保 HTML 结构中存在 ID 为 “container” 的元素，用于显示生成的内容。代码中的数据结构 res 仅为示例，实际应用中需要根据实际数据结构进行调整。可以根据需要自定义 HTML 结构和样式。
总结
本文介绍了一种使用 JavaScript 对包含学生信息的列表进行分组，并为每个分组添加“全选”复选框功能的解决方案。通过使用 reduce 方法按 Student.Id 对数据进行分组，然后动态生成 HTML 结构，实现数据的可视化和交互。该技术可以应用于各种需要对数据进行分组和批量操作的场景。
以上就是JavaScript：按ID分组列表并添加“全选”功能的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1518899.html
微信扫一扫 
支付宝扫一扫 
