本文旨在解决在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=> '
' +grp.map(s=>``).join("
")+'').join("");
这段代码的解释如下：
立即学习“Java免费学习笔记（深入）”；
Object.values(result): 获取 result 对象的所有值，即包含学生姓名数组的数组。.map(grp => …): 对每个学生姓名数组进行遍历，生成对应的 HTML 代码。’
‘: 为每个分组创建一个 div 元素，并在其中添加一个包含“全选”复选框的 label 元素。 class=”group” 用于后续的 JavaScript 代码，以便选择所有的“全选”复选框。grp.map(s =>).join(“
“): 对每个学生姓名进行遍历，生成包含学生姓名和复选框的 label 元素，并使用
标签分隔。.join(“”): 将所有生成的 HTML 代码连接成一个字符串。document.getElementById(“container”).innerHTML = …: 将生成的 HTML 代码插入到 id 为 container 的 HTML 元素中。
对应的HTML结构如下：
实现“全选”功能
最后，我们需要实现“全选”功能，即当点击“全选”复选框时，选中或取消选中该分组中的所有复选框。
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 属性相同，即选中或取消选中。
完整代码示例
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("
")+'
总结
本文详细介绍了如何使用 JavaScript 根据 ID 分组列表数据，并添加“全选”功能。通过使用 reduce 方法进行数据分组，动态生成 HTML 代码，以及添加事件监听器实现“全选”功能，我们可以高效地处理和展示分组数据。
注意事项:
代码中的 res 对象是一个示例数据，你需要将其替换为你实际的数据。container 元素的 id 可以根据你的实际情况进行修改。在实际项目中，你可能需要使用更复杂的 HTML 结构和 CSS 样式来美化页面。如果你的数据量很大，可以考虑使用虚拟 DOM 等技术来提高性能。
以上就是JavaScript教程：根据ID分组列表数据并添加“全选”功能的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/81127.html
微信扫一扫
支付宝扫一扫
