React 实现简易 Excel（选区篇）-工具盒子

介绍

最近在做表单低代码平台相关开发，其中有一个表格布局组件，需要实现 Excel 选区、合并、插入等功能，并往每个单元格放入组件，实现一个表格布局，其中 Excel 选区模式较难一点，花费了不少时间，在这里做一下记录，写文章也能继续理解一次。目前已经实现选区、合并、拆分功能，具体效果如下：

选区实现原理

第一步在鼠标事件 onmousedown 按下时，记录当前点击的单元格坐标信息，将此坐标当做开始坐标；定义一个数组，用于存放后续的所有坐标，暂叫坐标池；
在鼠标 onmousemove 事件移动时，记录当前移动过程停留单元格的坐标信息，存入坐标池，通过坐标池计算出开始坐标和结束坐标，再通过开始坐标和结束坐标推算出两点中间的所有坐标，得出一个区间坐标数组，将此时的区间数组转换为数组的下标，在 React 渲染时，通过下标比对，如果存在则为单元格加上一个高亮的选区 className ，这个过程需要实时计算；在这一步的计算过程中，需要注意以下两点：

在拖动过程中，如果遇见已经合并过的单元格，需要将已合并过的单元格合并的坐标一起放入坐标池，计算得出开始坐标和结束坐标，中间会有一个递归查询坐标的过程，此时的坐标才是最准确的；
在 onmousemove 每次给坐标池赋值时，需要先清除，否则会遗留已经失效的坐标，导致计算结果有误；
在鼠标事件 onmouseup 执行时，在执行一次第二步，并将元素的 onmousemove 、onmouseup 事件清除。

核心计算选区代码

计算两个坐标的区间坐标：

/**
 * 获取坐标区间
 * @param cells 所有单元格
 * @param firstCoordinate 第一个坐标
 * @param lastCoordinate 最后一个坐标
 * @param column 总列数
 */
export function getCoordinateRange(
  cells: TableCellType[],
  firstCoordinate: string,
  lastCoordinate: string,
  column: number
): string[] {
  if (!firstCoordinate || !lastCoordinate) return [];
  const [firstX, firstY] = firstCoordinate.split('_');
  const [lastX, lastY] = lastCoordinate.split('_');
  function generateCoordinates(
    minx: number,
    maxX: number,
    minY: number,
    maxY: number
  ) {
    const result: string[] = [];
    for (let x = minx; x <= maxX; x++) {
      for (let y = minY; y <= maxY; y++) {
        const coordinate = `${x}_${y}`;
        const currentCell = cells[coordinateToIndex(coordinate, column)];
        result.push(coordinate);
        if (currentCell?.firstCoordinate)
          result.push(currentCell.firstCoordinate);
        if (currentCell?.mergedCoordinate)
          result.push(currentCell.mergedCoordinate);
      }
    }
    return Array.from(new Set(result));
  }
  function findMaxAndMinCoordinate(coordinates: string[]) {
    const _rows = coordinates.map((item) => +item.split('_')[0]);
    const _columns = coordinates.map((item) => +item.split('_')[1]);
    const minx = Math.min(..._rows);
    const maxX = Math.max(..._rows);
    const minY = Math.min(..._columns);
    const maxY = Math.max(..._columns);
    return { minx, maxX, minY, maxY };
  }
  const minX = Math.min(+firstX, +lastX);
  const maxX = Math.max(+firstX, +lastX);
  const minY = Math.min(+firstY, +lastY);
  const maxY = Math.max(+firstY, +lastY);

// 第一次查找所有坐标
const coordinates = generateCoordinates(
Math.min(+firstX, +lastX),
Math.max(+firstX, +lastX),
Math.min(+firstY, +lastY),
Math.max(+firstY, +lastY)
);
const {
minx: newMinX,
maxX: newMaxX,
minY: newMinY,
maxY: newMaxY,
} = findMaxAndMinCoordinate(coordinates);

`// 如果两次查找的结果不相等，说明还有合并的单元格未找到，则继续查找
if (
minX !== newMinX ||
maxX !== newMaxX ||
minY !== newMinY ||
maxY !== newMaxY
) {
return getCoordinateRange(
cells,
``${newMinX}_${newMinY}``,
``${newMaxX}_${newMaxY}``,
column
);
}
return coordinates;
}`

鼠标选区代码实现

onmousedown 执行时，需要定义以下变量：

// 记录当前触发 onmousedown 的元素
const currentTarget = event.currentTarget as HTMLElement;

// 当前点击的单元格
// event.target 在 td 元素存在子级的情况，获取的不一定是 td，所以需要递归查询父级为 td 的元素
const cell = getElementParent(event.target as HTMLElement, 'td');


// 开始坐标
const startCoordinate = cell?.dataset.coordinate!;


// 如果当前单元格已经被合并过，则还需记录合并后的坐标
const startMergedCoordinate = cell?.dataset.mergedCoordinate ?? '';

`// 记录所有的坐标
let allCoordinates: string[] = [startCoordinate, startMergedCoordinate];`

onmousemove 执行时，需要完成上边第二步，执行以下代码：

function setEndPosition(event: React.MouseEvent) {
  allCoordinates = [startCoordinate, startMergedCoordinate];
  // 当前鼠标停留的单元格
  const currentCell = getElementParent(event.target as HTMLElement, 'td');

// 当前鼠标停留单元格坐标
const currentCellCoordinate = currentCell?.dataset.coordinate ?? '';
allCoordinates.push(currentCellCoordinate);


// 如果当前单元格被合并过，则需要一起被记录
const currentMergedCoordinate = currentCell?.dataset.mergedCoordinate;
if (currentMergedCoordinate) allCoordinates.push(currentMergedCoordinate);


// 通过坐标池计算得出真实的开始坐标、结束坐标
// 鼠标点击时，记录的开始坐标如果存在反向选区时，坐标就会不准确
const { startCoordinate: _startCoordinate, endCoordinate } =
buildSelectionCoordinates(flatRows, allCoordinates, columnNumber);


// 将已经计算后的坐标区间做记录
setSelectedCoordinates(
getCoordinateRange(flatRows, _startCoordinate, endCoordinate, columnNumber)
);

`// 计算后的坐标区间下标
setSelectedIndexList(
coordinatesToIndexList(
flatRows,
_startCoordinate,
endCoordinate,
columnNumber
)
);
}`

onmouseup 执行时，记录最后一次坐标信息，并做更新：

currentTarget.onmouseup = (event: any) => {
  // 记录最后一次坐标信息
  setEndPosition(event);
`// 清除事件
currentTarget.onmousemove = null;
currentTarget.onmouseup = null;
};`

数据结构

单元格数据类型

/** 单元格类型 */
export interface TableCellType {
  rowSpan: number;
  colSpan: number;
  width: number;
  height: number;
  coordinate: string;
  /** 被合并的第一个坐标 */
  firstCoordinate?: string | null;
  /** 合并之后的坐标 */
  mergedCoordinate?: string | null;
}