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;
登录
请登录后再发表评论。
评论列表:
目前还没有人发表评论