JavaScript中基于ID分组列表数据并实现全选功能的教程-js教程-PHP中文网

JavaScript中基于ID分组列表数据并实现全选功能的教程

本教程详细介绍了如何在JavaScript中将列表数据根据特定ID进行高效分组，并动态渲染为带有“全选”功能的交互式界面。我们将使用reduce方法进行数据聚合，并通过DOM操作和事件监听实现前端展示与交互逻辑，帮助开发者处理和展示结构化数据。

问题描述

在web开发中，我们经常需要从后端获取一组数据，并根据数据中的某个共同标识（例如student.id）进行分组，然后将这些分组后的数据展示在前端页面上。更进一步，每个分组还需要提供一个“全选”功能，允许用户一次性选中或取消选中该分组内的所有子项。

假设我们有以下结构的数据列表，其中包含学生的详细信息：

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"}}
    ]
};

登录后复制

我们的目标是将其渲染成如下所示的结构，其中每个Student.Id对应的学生姓名被归为一组，并且每组顶部有一个“Select All Students”复选框：

Select All Studentds // with check box
Student1
Student3
Student4

Select All Studentds // with check box
Student5
Student6

Select All Studentds // with check box
Student9
Student11

登录后复制

解决方案

解决此问题主要分为两个核心步骤：数据分组和前端渲染与交互。

1. 数据分组

首先，我们需要将原始列表中的学生数据根据Student.Id进行分组。JavaScript的Array.prototype.reduce()方法非常适合这种聚合操作。

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

const groupedStudents = res.List.reduce((accumulator, currentItem) => {
    const studentId = currentItem.Student.Id;
    const studentName = currentItem.Student.Name;

    // 如果accumulator中还没有这个ID的数组，则初始化一个空数组
    if (!accumulator[studentId]) {
        accumulator[studentId] = [];
    }
    // 将学生姓名添加到对应ID的数组中
    accumulator[studentId].push(studentName);
    return accumulator;
}, {}); // 初始值是一个空对象

/*
groupedStudents 的结果将是:
{
  '1': ['Student1', 'Student3', 'Student4'],
  '5': ['Student6', 'Student5'],
  '7': ['Student9', 'Student11']
}
*/

登录后复制

在这个reduce操作中：

accumulator 是累积器，它将最终存储分组后的数据，以Student.Id作为键，学生姓名数组作为值。
currentItem 是res.List中的每个元素。
currentItem.Student.Id 用于确定分组的键。
currentItem.Student.Name 是我们要收集的值。
accumulator[studentId] ??= [] 是一种简洁的写法，等同于 if (!accumulator[studentId]) { accumulator[studentId] = []; }，确保每个studentId对应的都是一个数组。

2. 前端渲染与交互

数据分组完成后，下一步是将其渲染到HTML页面上，并实现“全选”功能。

腾讯智影-AI数字人

基于AI数字人能力，实现7*24小时AI数字人直播带货，低成本实现直播业务快速增增，全天智能在线直播

查看详情

HTML 结构

我们需要一个容器元素来承载动态生成的学生列表，例如一个div：

<div id="container"></div>

登录后复制

JavaScript 渲染逻辑

我们将遍历groupedStudents对象（使用Object.values()获取所有分组数组），然后为每个分组生成对应的HTML结构。

const container = document.getElementById("container");

container.innerHTML = Object.values(groupedStudents)
    .map(group => {
        // 为每个分组生成一个包含“全选”复选框和学生姓名的div
        const groupHeader = `<div>
            <label>Select All Students <input type="checkbox" class="group-select-all"></label><br>`;

        // 为分组内的每个学生生成一个复选框
        const studentItems = group.map(studentName => 
            `<label><input type="checkbox">${studentName}</label>`
        ).join("<br>"); // 每个学生项之间用<br>分隔

        return groupHeader + studentItems + '</div>';
    })
    .join(""); // 各个分组之间不需要额外的分隔符

登录后复制

Object.values(groupedStudents) 返回一个数组，其中包含所有按ID分组的学生姓名数组。
map() 方法用于将每个学生姓名数组转换成一个HTML字符串块。
每个HTML块包含一个带有class="group-select-all"的“全选”复选框，以及该分组内所有学生的复选框。
join("<br>") 用于将同一组内的学生复选框用换行符连接起来。
最外层的join("") 将所有分组的HTML块连接成一个大字符串，赋值给container.innerHTML。

实现“全选”功能交互

最后，我们需要为每个“全选”复选框添加事件监听器，使其能够控制其所在分组内所有学生复选框的选中状态。

document.querySelectorAll(".group-select-all").forEach(selectAllCheckbox => {
    selectAllCheckbox.addEventListener("click", () => {
        // 找到当前“全选”复选框所属的最近的div容器
        const groupDiv = selectAllCheckbox.closest("div");
        // 选中该div内所有的复选框（除了“全选”本身，但这里选择器会包含）
        // 更好的做法是排除掉自身的class，但由于我们目标是所有[type=checkbox]，通常也无妨
        groupDiv.querySelectorAll("[type=checkbox]").forEach(checkbox => {
            checkbox.checked = selectAllCheckbox.checked;
        });
    });
});

登录后复制

document.querySelectorAll(".group-select-all") 选取所有带有group-select-all类的复选框。
forEach() 遍历这些复选框，为每个复选框添加一个click事件监听器。
在事件处理函数中：
- selectAllCheckbox.closest("div") 向上遍历DOM树，找到当前“全选”复选框最近的父级div元素，这个div就是该学生分组的容器。
- groupDiv.querySelectorAll("[type=checkbox]") 查找该分组容器内所有的复选框。
- forEach() 遍历这些复选框，并将它们的checked状态设置为与“全选”复选框相同的状态。

完整示例代码

将以上所有代码整合，得到一个完整的解决方案：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 分组数据与全选功能</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        #container > div {
            border: 1px solid #eee;
            padding: 15px;
            margin-bottom: 20px;
            background-color: #f9f9f9;
            border-radius: 5px;
        }
        label { display: block; margin-bottom: 5px; }
        .group-select-all { margin-right: 5px; }
    </style>
</head>
<body>
    <h1>学生列表分组与全选示例</h1>
    <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"}}]};

        // 1. 数据分组
        const groupedStudents = res.List.reduce((accumulator, currentItem) => {
            const studentId = currentItem.Student.Id;
            const studentName = currentItem.Student.Name;
            (accumulator[studentId] ??= []).push(studentName);
            return accumulator;
        }, {});

        // 2. 前端渲染
        const container = document.getElementById("container");
        container.innerHTML = Object.values(groupedStudents)
            .map(group =>
                `<div>
                    <label>Select All Students <input type="checkbox" class="group-select-all"></label><br>`
                    + group.map(studentName => `<label><input type="checkbox">${studentName}</label>`).join("<br>")
                + `</div>`
            ).join("");

        // 3. 添加“全选”功能交互
        document.querySelectorAll(".group-select-all").forEach(selectAllCheckbox => {
            selectAllCheckbox.addEventListener("click", () => {
                const groupDiv = selectAllCheckbox.closest("div");
                groupDiv.querySelectorAll("[type=checkbox]").forEach(checkbox => {
                    checkbox.checked = selectAllCheckbox.checked;
                });
            });
        });
    </script>
</body>
</html>

登录后复制

注意事项与扩展

性能考虑： 对于非常大的数据集，频繁地操作innerHTML可能会有性能开销。在更复杂的应用中，可以考虑使用虚拟DOM库（如React, Vue）或更精细的DOM操作来优化渲染性能。

Map vs. Plain Object for Grouping： 在JavaScript中，除了使用普通对象作为累加器外，也可以使用Map对象进行分组。Map的键可以是任何类型（包括对象），并且在某些场景下可能提供更好的性能或更清晰的语义。对于本例，ID是数字或字符串，普通对象已足够。

// 使用Map进行分组
const groupedStudentsMap = res.List.reduce((map, item) => {
    const studentId = item.Student.Id;
    const studentName = item.Student.Name;
    if (!map.has(studentId)) {
        map.set(studentId, []);
    }
    map.get(studentId).push(studentName);
    return map;
}, new Map());
// 渲染时使用 Array.from(groupedStudentsMap.values()) 或 [...groupedStudentsMap.values()]

登录后复制

双向绑定（全选/全不选与子项状态同步）： 当前的“全选”功能是单向的（全选控制子项）。如果需要子项状态改变时也能更新“全选”的状态（例如，所有子项都被手动选中时，“全选”自动选中），则需要为每个子项的复选框也添加事件监听器，并在其状态改变时检查同组内所有子项的状态。
错误处理： 在实际应用中，应考虑res.List可能为空或数据结构不符合预期的情况，添加相应的检查。
可访问性（Accessibility）： 为label元素添加for属性并与input的id关联，可以提高表单的可访问性。
代码组织： 对于更大型的项目，可以将数据处理、DOM渲染和事件绑定逻辑封装到不同的函数或模块中，以提高代码的可维护性。

总结

本教程详细展示了如何利用JavaScript的reduce方法对复杂数据结构进行高效分组，并通过DOM操作和事件监听实现了动态渲染带有“全选”功能的交互式列表。这种模式在处理和展示结构化数据时非常常见，掌握这些技术将有助于开发者构建更灵活和用户友好的Web界面。通过模块化和考虑性能及可访问性，可以进一步提升应用的质量。

以上就是JavaScript中基于ID分组列表数据并实现全选功能的教程的详细内容，更多请关注php中文网其它相关文章！