react+antd前端实现合并的表格排序功能

咔咔咔咔咔咔fofofo
206 阅读4分钟

Ⅰ- 壹 - 功能展示和使用需求

需求描述

被合并的表格支持排序，并且合并后的数据，每一列都可以进行分组的排序。

功能展示

Snipaste_2025-11-01_15-04-54.png

Ⅲ - 叁 - 设计思路

json数据格式

说明：

  1. "rowSpan" 和 "colSpan" 用于控制单元格合并显示。
  2. 每个 row 对应一行数据，每行的 cells 对应列数据。例如 "rowSpan": 3 表示该单元格跨 3 行显示。
  3. 表头 headers 可以是多行表头，这里只有一行。例如 "colspan": 3 表示该单元格跨 3 列显示。
  4. value 是实际显示的内容，可为日期、区域、平台名称、数值等。
tableData.json


{
  // 表头信息
  "headers": [
    [
      {
        "title": "", // 占位列，可能用于日期或区域
        "colspan": 3, // 占 3 列
        "rowspan": 1  // 占 1 行
      },
      {
        "title": "平台DAU", // 日活跃用户数
        "colspan": 1,
        "rowspan": 1
      },
      {
        "title": "新增用户", // 新增用户数
        "colspan": 1,
        "rowspan": 1
      },
      {
        "title": "活跃率(%)", // 活跃率百分比
        "colspan": 1,
        "rowspan": 1
      },
      {
        "title": "GMV(万元)", // GMV（成交金额），单位：万元
        "colspan": 1,
        "rowspan": 1
      }
    ]
  ],

  // 表格行数据
  "rows": [
    {
      "id": "row-1-1", // 每行唯一 id
      "cells": [
        {
          "value": "20250101", // 日期
          "colSpan": 1,
          "rowSpan": 5 // 日期跨 5 行
        },
        {
          "value": "华北区", // 区域
          "colSpan": 1,
          "rowSpan": 3 // 区域跨 3 行
        },
        {
          "value": "微信小程序", // 平台名称
          "colSpan": 1,
          "rowSpan": 1
        },
        {
          "value": 5399070, // 平台 DAU
          "colSpan": 1,
          "rowSpan": 1
        },
        {
          "value": 123456, // 新增用户
          "colSpan": 1,
          "rowSpan": 1
        },
        {
          "value": 68.5, // 活跃率
          "colSpan": 1,
          "rowSpan": 1
        },
        {
          "value": 8520.3, // GMV(万元)
          "colSpan": 1,
          "rowSpan": 1
        }
      ]
    },
    {
      "id": "row-1-2",
      "cells": [
        {
          "value": "点评APP", // 平台名称
          "colSpan": 1,
          "rowSpan": 1
        },
        {
          "value": 2537534433, // 平台 DAU
          "colSpan": 1,
          "rowSpan": 1
        },
        {
          "value": 987654, // 新增用户
          "colSpan": 1,
          "rowSpan": 1
        },
        {
          "value": 72.8, // 活跃率
          "colSpan": 1,
          "rowSpan": 1
        },
        {
          "value": 125600.7, // GMV(万元)
          "colSpan": 1,
          "rowSpan": 1
        }
      ]
    },
    {
      "id": "row-1-3",
      "cells": [
        {
          "value": "美团APP",
          "colSpan": 1,
          "rowSpan": 1
        },
        {
          "value": 39420903,
          "colSpan": 1,
          "rowSpan": 1
        },
        {
          "value": 456789,
          "colSpan": 1,
          "rowSpan": 1
        },
        {
          "value": 81.2,
          "colSpan": 1,
          "rowSpan": 1
        },
        {
          "value": 98760.5,
          "colSpan": 1,
          "rowSpan": 1
        }
      ]
    },
    {
      "id": "row-1-4",
      "cells": [
        {
          "value": "华南区",
          "colSpan": 1,
          "rowSpan": 2 // 区域跨 2 行
        },
        {
          "value": "抖音小程序",
          "colSpan": 1,
          "rowSpan": 1
        },
        {
          "value": 18765432,
          "colSpan": 1,
          "rowSpan": 1
        },
        {
          "value": 234567,
          "colSpan": 1,
          "rowSpan": 1
        },
        {
          "value": 55.3,
          "colSpan": 1,
          "rowSpan": 1
        },
        {
          "value": 45320.8,
          "colSpan": 1,
          "rowSpan": 1
        }
      ]
    },
    {
      "id": "row-1-5",
      "cells": [
        {
          "value": "支付宝小程序",
          "colSpan": 1,
          "rowSpan": 1
        },
        {
          "value": 8234567,
          "colSpan": 1,
          "rowSpan": 1
        },
        {
          "value": 89012,
          "colSpan": 1,
          "rowSpan": 1
        },
        {
          "value": 62.7,
          "colSpan": 1,
          "rowSpan": 1
        },
        {
          "value": 23456.2,
          "colSpan": 1,
          "rowSpan": 1
        }
      ]
    },

    // 之后的行数据和结构类似，省略重复注释
    // "row-2-1" 到 "row-5-5" 依次是不同日期和不同区域、平台的数据
  ]
}

核心逻辑

  • 分组逻辑：

    • 利用 rowSpan>1 单元格生成 groupIdentifier。
    • 通过 getJoinedSlice 生成 groupKey。
    • 使用 Map 保持分组顺序。

  • 排序逻辑：

    • 数字与中文混合排序使用 localeCompare。
    • 对第一列（分组列）排序时保持原始分组顺序。
    • 合并单元格的数据只保留在第一行。

利用ai实现各个方法，最终实现该功能

核心代码解析sortGroupedData方法

1️⃣ 基础设置与前置信息提取
const { columnIndex = 0, order = "asc" } = config;

let headersLen = headers[0].reduce((total, currentItem) => {
  const colspanValue = currentItem.colspan || 0;
  return total + colspanValue;
}, 0);

🔹 headersLen：计算整张表实际的列数（考虑 colspan）。
用于判断数据行是不是“完整的一行”。

2️⃣ 判断哪些列属于“合并列”区域
let mergedRowEndIndex = data
  .find(item => item.cells?.length == headersLen)
  ?.cells?.filter(f => f.rowSpan > 1)?.length - 1;

这一步的意思是：

找出第一个完整的行，然后看看它有多少个单元格 rowSpan > 1，
这些列就是合并列的区间。

例如：前两列合并（日期、区域），则 mergedRowEndIndex = 1。

3️⃣ 构建分组映射 groupMap
const groupMap = new Map();
const groupOrder = [];
const rowSpanMap = new Map();

这个阶段是核心之一：

  • 遍历每行；
  • 识别它属于哪个分组；
  • 把同一组的行放在一起；
  • 同时记录每组在表中的顺序（groupOrder）。
rows.reduce((prev, cur, index, arr) => {
  let curGroupIdentifier = getJoinedSlice(cur?.groupIdentifier, columnIndex);
  
  if (oneCell?.rowSpan > 1) {
    // 如果是合并行的首行
    ...
  } else {
    // 普通行，往上追溯最近的合并行
    ...
  }

  if (rowSpanMap.get(curGroupIdentifier) >= index) {
    // 将当前行归入该组
    ...
  }
}, [])

这里的关键思想是：

  • 用 groupIdentifier 标识分组；
  • 用 rowSpanMap 确定每组的“行范围”。
4️⃣ 合并列区域排序逻辑
if (mergedRowEndIndex >= columnIndex) {
  for (const key of groupOrder) {
    const groupRows = groupMap.get(key);
    ...
  }
}

当排序列在合并列区间内时：

  • 每个分组内部继续按 groupIdentifier[columnIndex] 拆分；
  • 按该值排序；
  • 然后再拍平成行。

这里还区分了两种排序逻辑：

  • 如果 columnIndex == 0：用 sortMixedData
  • 否则：用 groupAndSortByFirstIdentifier + mergeAndCleanByDate

这些方法分别是：

  • sortMixedData：对基础值混合排序（数字、字符串兼容）；
  • groupAndSortByFirstIdentifier：分组内部排序；
  • mergeAndCleanByDate：清理合并单元格并合并重复组。
5️⃣ 非合并列排序逻辑
else {
  for (const key of groupOrder) {
    const groupRows = groupMap.get(key);
    ...
  }
}

当 mergedRowEndIndex < columnIndex 时：

排序的列不在合并区域内，就按普通逻辑排序。

这部分逻辑最复杂：

  • 动态计算列对应的实际位置（考虑 rowSpan 和 colspan 导致的位移）
  • 获取对应单元格的值 sortValue
  • 进行排序
  • 最后再执行行首单元格调整逻辑

这个调整逻辑是：

v.row.cells?.map((cur, cellsindex, rarr) => {
  let isCurgroupIdentifier = ...
  if (条件成立) {
    // 把属于该分组的合并单元格插入首行
  }
});

目的：

确保排序后，分组的表头单元格仍位于组的首行。

Ⅲ - 叁 - 完整代码

go2fofo/RVA-CrossSort: 被合并的表格支持排序，并且合并后的数据，每一列都可以进行分组的排序。

avatar
文章
阅读
粉丝