主页

react handsontable 表格数据不能为空

2025-05-26 04:49PM

 想要在handsontable中实现表格数据不能为空,具体代码内容如下:

(注意:主要实现代码是有蓝色注释的代码,其他只是一些示例内容可能不全)

import { HotTable } from '@handsontable/react';
import HandsonTable from "@/compontens/HandsonTable";
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

registerAllModules();

xxxxx

  handleNext = async() => {
    const {
      planId, templateIds,
    } = this.state;

    // 从 Handsontable 实例中提取表格数据并存储在 bigTableData 变量中
    const bigTable = this.tableRefs['bigTable'].hotInstance.getData();

    // 检查每个单元格是否都有数据(从第二列开始,跳过年份列)
    for (let col = 1; col < bigTable[0].length; col++) {
      // 从第二行开始检查(跳过表头)
      for (let row = 1; row < bigTable.length; row++) {
        const cell = bigTable[row][col];
        // 检查是否为有效数据
        if (cell === null || cell === undefined || cell === '' || cell === '0' || String(cell).trim() === '' || String(cell).trim() === '0') {
          message.warning('请检查表格,确保所有单元格都已填写,否则将无法得到计算结果');
          return;
        }
      }
    }

    // 打印完整的表格数据,用于调试
    console.info('表格完整数据:', JSON.stringify(bigTable, null, 2));

    // 将bigTable这个二维数组中所有单元格的值转换为字符串
    const bigTableData = bigTable.map(row => row.map(cell => String(cell)))
    const nestedHeaders = this.state.tableHeaders;

    // nestedHeadersData 检查每一个单元格 (cell) 是否为对象,如果是,则将其转换为一个包含 label 和 colspan 信息的字符串。
    // 如果单元格不是对象,则简单地将其转换为字符串。

    const nestedHeadersData = nestedHeaders.map(row => row.map(cell => String(cell)))
    const requestData = {
      planId,
      selectedRegion,
      algorithmAndColumnMapping,
      nestedHeader: nestedHeadersData
    };
    this.props.history.push('/calculation_for_parameter', requestData);
  }

  handleGoBack = () => {
    this.props.history.push('/pre_calculation')
  };

xxxxxxx

render() {

    const { data, name, templateId, startYear, endYear, algorithmName, selectedAlgorithmNames } = this.state;

    return (       

        <div style={{ overflowX: 'auto' }}> {/* 外部容器 */}
          <HotTable
            id="bigTable"
            data={this.tableBody()}
            nestedHeaders={this.state.tableHeaders}
            ref={(ref) => { this.tableRefs['bigTable'] = ref; }}
            colHeaders={false}
            rowHeaders={false}
            autoWrapRow={true}
            autoWrapCol={true}
            height="auto"
            colWidths={175}
            licenseKey="non-commercial-and-evaluation"
            manualColumnResize={true}
            stretchH="none" // 禁用自动拉伸
            className="htCenter"
          />
        </div>

    )
  }
}

export default CalculationForDemo;

返回>>

登录

请登录后再发表评论。

评论列表:

目前还没有人发表评论