前端合并的表格排序功能

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

需求描述

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

功能展示

Ⅲ - 叁 - 设计思路

json数据格式

说明：

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

tableData.json

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实现各个方法，最终实现该功能

Ⅲ - 叁 - 完整代码

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