本文旨在解决在JavaScript中，如何根据列表中对象的特定ID属性进行分组，并在每个分组的开头添加一个“全选”复选框的需求。我们将通过示例代码，详细讲解如何使用reduce方法实现数据分组，以及如何动态生成HTML代码以展示分组后的数据，并实现“全选”功能。
数据分组
假设我们有一个包含学生信息的列表 res.List，每个学生对象都有一个 Student.Id 属性。我们的目标是根据 Student.Id 将学生信息分组，并将相同 Id 的学生放在一组。
可以使用 reduce 方法来实现这一目标。reduce 方法对数组中的每个元素执行一个reducer函数（由你提供），并将结果汇总为单个返回值。
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;
},{});
console.log(result);
这段代码的解释如下：
立即学习“Java免费学习笔记（深入）”；
- res.List.reduce((a, c, i) => { … }, {}): reduce 方法遍历 res.List 数组。a 是累加器，初始值为空对象 {}。c 是当前元素，i 是当前索引。
- (a[c.Student.Id] ??= []): 这一行是关键。它检查累加器 a 中是否已经存在以当前学生的 Student.Id 为键的属性。如果不存在，则创建一个空数组 [] 并赋值给 a[c.Student.Id]。如果存在，则直接使用已有的数组。??= 是空值合并赋值运算符，等价于 a[c.Student.Id] = a[c.Student.Id] || []。
- a[c.Student.Id].push(c.Student.Name): 将当前学生的 Student.Name 添加到以 Student.Id 为键的数组中。
- return a: 返回累加器 a，以便在下一次迭代中使用。
最终，result 对象将包含以 Student.Id 为键，以学生姓名数组为值的键值对。
动态生成 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免费学习笔记（深入）”；
- Object.values(result): 获取 result 对象的所有值，即包含学生姓名数组的数组。
- .map(grp => …): 对每个学生姓名数组进行遍历，生成对应的 HTML 代码。
- ‘<div><label>Select All Studentds <input type=”checkbox” class=”group”></label><br>’: 为每个分组创建一个 div 元素，并在其中添加一个包含“全选”复选框的 label 元素。 class=”group” 用于后续的 JavaScript 代码，以便选择所有的“全选”复选框。
- grp.map(s =>).join(“<br>”): 对每个学生姓名进行遍历，生成包含学生姓名和复选框的 label 元素，并使用 <br> 标签分隔。
- .join(“”): 将所有生成的 HTML 代码连接成一个字符串。
- document.getElementById(“container”).innerHTML = …: 将生成的 HTML 代码插入到 id 为 container 的 HTML 元素中。
对应的HTML结构如下：
<div id="container"></div>
实现“全选”功能
最后，我们需要实现“全选”功能，即当点击“全选”复选框时，选中或取消选中该分组中的所有复选框。
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.addEventListener(“click”, () => …): 为每个“全选”复选框添加点击事件监听器。
- cb.closest(“div”): 找到当前“全选”复选框所在的 div 元素，即当前分组的容器。
- cb.closest(“div”).querySelectorAll(” [type=checkbox]”): 选择当前分组容器中的所有复选框。
- .forEach(c => c.checked = cb.checked): 将所有复选框的 checked 属性设置为与“全选”复选框的 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>
总结
本文详细介绍了如何使用 JavaScript 根据 ID 分组列表数据，并添加“全选”功能。通过使用 reduce 方法进行数据分组，动态生成 HTML 代码，以及添加事件监听器实现“全选”功能，我们可以高效地处理和展示分组数据。
注意事项:
- 代码中的 res 对象是一个示例数据，你需要将其替换为你实际的数据。
- container 元素的 id 可以根据你的实际情况进行修改。
- 在实际项目中，你可能需要使用更复杂的 HTML 结构和 CSS 样式来美化页面。
- 如果你的数据量很大，可以考虑使用虚拟 DOM 等技术来提高性能。
本站资料仅供学习交流使用请勿商业运营，严禁从事违法，侵权等任何非法活动，否则后果自负！
THE END
暂无评论内容