Silevis Reactgrid技术问询：如何从选中范围获取数据列表？

要实现从ReactGrid选中范围提取数据并做汇总，核心是利用组件的选中事件回调，结合数据源进行数据提取与计算，具体步骤如下：

1. 监听选中范围变化 #

ReactGrid提供了onSelectionChange回调，当用户选中单元格范围时，会触发该回调并返回当前选中的范围信息。你需要在组件中绑定这个回调来捕获选中的坐标：

import { ReactGrid, Selection } from "@silevis/reactgrid";
import { useState } from "react";

// 假设你的数据源是rows数组，columns定义列配置
const MyGrid = () => {
  const [selection, setSelection] = useState<Selection | null>(null);
  const [rows, setRows] = useState(/* 你的初始数据 */);
  
  const handleSelectionChange = (newSelection: Selection | null) => {
    setSelection(newSelection);
  };

  return (
    <ReactGrid
      rows={rows}
      columns={columns}
      onSelectionChange={handleSelectionChange}
    />
  );
};

2. 从选中范围提取对应数据 #

拿到selection对象后，它包含start和end两个坐标点（每个点有rowIndex和columnIndex）。先确定选中行和列的边界，再从rows中提取对应单元格的数据：

const extractSelectedData = () => {
  if (!selection) return [];
  
  // 处理选中范围的边界，确保start坐标始终小于等于end坐标
  const startRow = Math.min(selection.start.rowIndex, selection.end.rowIndex);
  const endRow = Math.max(selection.start.rowIndex, selection.end.rowIndex);
  const startCol = Math.min(selection.start.columnIndex, selection.end.columnIndex);
  const endCol = Math.max(selection.start.columnIndex, selection.end.columnIndex);
  
  const selectedValues: number[] = [];
  
  // 遍历选中的行和列，提取数值型数据
  for (let rowIdx = startRow; rowIdx <= endRow; rowIdx++) {
    const row = rows[rowIdx];
    for (let colIdx = startCol; colIdx <= endCol; colIdx++) {
      const columnKey = columns[colIdx].columnKey;
      const cellValue = row.cells[columnKey];
      // 只提取数值类型数据，可根据业务调整判断逻辑
      if (typeof cellValue === 'number') {
        selectedValues.push(cellValue);
      }
    }
  }
  
  return selectedValues;
};

3. 实现汇总计算 #

有了提取到的selectedValues数组，就能轻松实现求和、平均值、最大值等汇总计算：

const calculateSummary = () => {
  const data = extractSelectedData();
  if (data.length === 0) return { sum: 0, avg: 0, max: 0 };
  
  const sum = data.reduce((acc, curr) => acc + curr, 0);
  const avg = sum / data.length;
  const max = Math.max(...data);
  
  return { sum, avg, max };
};

整合到组件中 #

将上述逻辑整合后，可在页面实时展示汇总结果，比如在ReactGrid下方显示选中数据的求和值：

const MyGrid = () => {
  // ... 之前的状态定义
  
  const summary = calculateSummary();
  
  return (
    <div>
      <ReactGrid
        rows={rows}
        columns={columns}
        onSelectionChange={handleSelectionChange}
      />
      <div className="summary-bar">
        选中数据求和：{summary.sum} | 平均值：{summary.avg.toFixed(2)} | 最大值：{summary.max}
      </div>
    </div>
  );
};

注意事项 #

• 如果使用自定义单元格组件，需确保cellValue能正确获取到原始数值
• 若支持多选不连续范围，selection会是一个数组，需遍历每个范围分别提取数据
• 可根据业务需求调整数据过滤逻辑，比如只提取特定列类型的数据

内容的提问来源于stack exchange，提问作者PTOAKKY