本文旨在提供一种使用 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=>
'<div><label>Select All Studentds <input type="checkbox" class="group"></label><br>'
+grp.map(s=>`<label><input type="checkbox">${s}</label>`).join("<br>")+'</div>').join("");
这段代码的含义是：
立即学习“Java免费学习笔记（深入）”；
- document.getElementById(“container”): 获取 ID 为 “container” 的 HTML 元素。这个元素将用于显示生成的内容。
- Object.values(result): Object.values() 方法返回一个数组，其中包含 result 对象的所有值（即，按 Student.Id 分组的学生姓名数组）。
- .map(grp => …): 对每个学生姓名数组（grp）进行映射，生成一个包含 HTML 结构的字符串。
- ‘<div><label>Select All Studentds <input type=”checkbox” class=”group”></label><br>’: 为每个分组创建一个 div 元素，并在其中添加一个 “Select All Studentds” 的标签和一个复选框。 这个复选框的 class 设置为 “group”，稍后将用于实现 “全选” 功能。
- grp.map(s =>).join(“<br>”): 对当前分组中的每个学生姓名 (s) 进行映射，生成一个包含复选框和学生姓名的标签。 然后使用 <br> 将这些标签连接起来，形成一个垂直排列的列表。
- ‘</div>’: 关闭 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 属性相同的值。 这样，当点击 “全选” 复选框时，该组的所有复选框都会被选中或取消选中。
完整代码示例
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Grouping and Select All</title>
</head>
<body>
<div id="container"></div>
<script>
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=>
'<div><label>Select All Studentds <input type="checkbox" class="group"></label><br>'
+grp.map(s=>`<label><input type="checkbox">${s}</label>`).join("<br>")+'</div>').join("");
document.querySelectorAll(".group").forEach(cb=>
cb.addEventListener("click",()=>cb.closest("div").querySelectorAll(" [type=checkbox]").forEach(c=>c.checked=cb.checked)))
</script>
</body>
</html>
这段代码将生成一个包含分组学生列表和“全选”功能的 HTML 页面。
注意事项
- 确保 HTML 结构中存在 ID 为 “container” 的元素，用于显示生成的内容。
- 代码中的数据结构 res 仅为示例，实际应用中需要根据实际数据结构进行调整。
- 可以根据需要自定义 HTML 结构和样式。
总结
本文介绍了一种使用 JavaScript 对包含学生信息的列表进行分组，并为每个分组添加“全选”复选框功能的解决方案。通过使用 reduce 方法按 Student.Id 对数据进行分组，然后动态生成 HTML 结构，实现数据的可视化和交互。该技术可以应用于各种需要对数据进行分组和批量操作的场景。
本站资料仅供学习交流使用请勿商业运营，严禁从事违法，侵权等任何非法活动，否则后果自负！
THE END
暂无评论内容