数据网格
规格
| 标签 | 值 |
|---|---|
| 版本 | 1.0.0（更新于 2026-04-08） |
| 开发者 | Labii Inc. |
| 类型 | 章节 |
| 支持配置 | 否 |
概述
数据网格小插件直接在 Labii 实验章节中提供快速直观的电子表格体验。它基于 react-data-grid 库构建，将大型数据集的高性能虚拟呈现与丰富的编辑功能相结合，所有操作均可在 Labii 界面内完成。科研人员可以添加或移除行列、重命名行列标题、按任意列排序数据、嵌入编辑单元格、复制和粘贴 Excel 数据，以及从 .xlsx、.tsv 或 .csv 文件导入表格数据。数据网格适合记录测定结果、跟踪板布局、录入测量表、管理小型参考数据集，以及任何更适合在实验中嵌入结构化可编辑表格、而不是使用功能完整电子表格的场景。
Jspreadsheet（以前称为 jExcel）已停用。请改用数据网格小插件。
使用场景
- 测定数据记录：在与实体板或微孔布局对应的结构化网格中输入原始吸光度、信号强度或浓度读数
- 板布局记录：在单个嵌入表格中将样品标识符、标准品、空白和对照映射到孔位（A1–H12）
- 标准品和校准表：在同一实验章节中保存标准曲线的浓度与响应数据及计算步骤
- 测量跟踪：以带清晰标签的表格格式记录不同时间点或重复实验的测量结果
- 方案参数表：在紧凑网格中整理反应条件、试剂体积、升温步骤或循环参数
- 粘贴仪器数据：直接从仪器软件或 Excel 复制并快速粘贴表格输出，无需重新设置格式
- 小型参考数据集：维护实验记录本中使用的查找表、换算系数或参考范围
界面
只读视图
在只读模式下，数据网格将存储的表格呈现为整洁且可滚动的网格。冻结的标题行显示列字母（A、B、C……）或自定义列名，第一列显示行号。所有单元格值均可见但不可编辑，工具栏会被隐藏。用户可以横向和纵向滚动大型数据集，标题行和行号列保持固定，以提供上下文。
只读视图显示存储的表格，并冻结列标题和行号以便参考
编辑视图
编辑视图会激活完整的交互式工具栏，并启用所有数据录入和管理功能。界面分为三个区域：
- 工具栏（顶部）：包含 Row、Column 和 Export 三个用于结构操作的下拉菜单
- 网格区域（中部）：包含可编辑单元格、可排序列标题及行列删除控件的交互式电子表格
- 导入区域（底部）：用于将
.xlsx、.tsv或.csv文件直接加载到网格的拖放区域
编辑视图提供完整工具栏、嵌入式单元格编辑和文件导入拖放区域
功能
单元格编辑
双击任意单元格以激活嵌入式文本编辑器。输入新值并按 Enter 或 Tab 确认，然后移动到下一个单元格。按 Escape 放弃更改。单击活动单元格外部也会提交输入的值。
数据网格中的所有单元格都是纯文本编辑器。如需丰富格式、公式或图表，请改用 SpreadJS Table 小插件。
排序
单击列标题，按该列对网格进行升序排序。再次单击可切换为降序。活动排序列旁会显示排序箭头。
若要同时按多列排序，请按住 Ctrl（Windows/Linux）或 Cmd（macOS），然后单击其他列标题。每个已排序列都会在方向箭头旁显示排序优先级编号。
列操作
打开工具栏中的 Column 下拉菜单，可以使用：
- Add Column：在最后一列右侧添加新列
- Remove Column：删除当前选定列及其数据
若要重命名列标题，请双击任意列的标题单元格。输入新名称并按 Enter 确认。
若要调整列宽，请将任意列标题的右边缘拖到所需宽度。
若要重新排列列，请横向拖动列标题到新位置后松开。
行操作
打开工具栏中的 Row 下拉菜单，可以使用：
- Add Row：在最后一行下方添加新的空行
- Remove Row：删除当前选定行及其数据
若要重命名行，请编辑行号单元格（A 列位置）或指定行标签列中的值。
若要删除特定行，请单击鼠标悬停时显示在行末尾的垃圾桶图标（🗑）。
复制和粘贴
数据网格支持与 Excel 及其他电子表格应用程序完整互操作剪贴板：
- 复制单元格：单击单元格将其选中，然后按 Ctrl+C / Cmd+C
- 粘贴到单元格：选择目标单元格，然后按 Ctrl+V / Cmd+V
- 从 Excel 粘贴区域：在 Excel 中选择并复制一个区域，单击数据网格左上方的目标单元格，然后按 Ctrl+V / Cmd+V；系统会自动粘贴完整的行列数据块
- 粘贴标题：如果复制的区域包含行标题或列标题，数据网格会检测这些标题并自动更新相应的行列标签，便于快速批量重命名标题
粘贴多单元格区域时，数据网格仅填充现有行列。如果粘贴区域大于可用空间，请先使用 Row 和 Column 下拉菜单添加所需行列。
若要批量更新行标题或列标题，请从 Excel 复制包含标题标签的单行或单列，并将其直接粘贴到网格。数据网格会读取所粘贴内容第一行或第一列中的标题值，并立即将其应用为标签。
从文件导入
编辑视图底部包含拖放导入区域。支持以下格式：
| 格式 | 扩展名 | 说明 |
|---|---|---|
| Excel 工作簿 | .xlsx | 导入第一个工作表 |
| 制表符分隔值 | .tsv | 建议使用 UTF-8 编码 |
| 逗号分隔值 | .csv | 建议使用 UTF-8 编码 |
若要导入文件：
单击章节上的 Edit 按钮进入编辑模式
从文件资源管理器拖动 .xlsx、.tsv 或 .csv 文件，并将其放到小插件底部的 "Drag and drop files here or click to select" 区域
也可以单击导入区域打开文件选择器，然后选择文件
文件内容会加载到网格中并替换所有现有数据
检查导入的数据并根据需要进行更正
单击 Save，将导入的数据保存到记录
导入文件会替换所有现有网格数据。如果需要保留原始内容，请在导入前保存副本或导出当前数据。
导出
单击工具栏中的 Export 下拉菜单并选择所需格式，下载当前网格内容：
- Export to CSV：将网格下载为逗号分隔值（
.csv）文件，可与 Excel、Google 表格及大多数数据分析工具兼容 - Export to TSV：将网格下载为制表符分隔值（
.tsv）文件，适用于使用制表符分隔符的工具，或单元格值可能包含逗号的情况
配置
数据网格小插件无需配置。添加到章节后即可立即使用。
其他功能
键盘导航
数据网格支持完整的键盘导航，可提高数据录入效率：
| 按键 | 操作 |
|---|---|
| 方向键 | 移动活动单元格选择 |
| Enter | 确认编辑并向下移动 |
| Tab | 确认编辑并向右移动 |
| Shift+Tab | 向左移动 |
| Escape | 取消编辑而不保存 |
| Ctrl/Cmd+C | 复制选定单元格的值 |
| Ctrl/Cmd+V | 将剪贴板内容粘贴到选定单元格 |
| 双击 | 打开单元格编辑器 |
冻结列
横向滚动时，行号列以及左侧可选的其他列会保持固定（冻结），即使存在许多列，也能始终看到行标识符。
虚拟化呈现
网格使用虚拟呈现，只在 DOM 中装载当前视口内可见的行列。即使表格包含数百行和数十列，也能确保流畅的滚动性能。
最佳实践
数据整理
- 使用第一行作为类别或组标签，后续行用于各个数据点
- 添加列后立即指定描述性列名，避免网格扩大后产生混淆
- 将样品标识符或孔位放在最左侧列，使其在横向滚动时保持可见
导入外部数据
- 从仪器软件或分析工具将数据导出为
.csv或.xlsx，然后再导入数据网格 - 检查文件第一行是否包含列标题，这些标题会成为网格中的标题行
- 对于酶标仪数据，请在导入前确保孔 ID 映射到行、测量结果映射到列
数据录入效率
- 使用 Tab 在行内移动，使用 Enter 在列内向下移动，以便快速连续录入
- 一次性从 Excel 粘贴整个数据块，避免逐个单元格输入值
- 粘贴大型区域前添加所有所需行列，以防数据被截断
应避免的常见问题
- 避免在未先导出当前数据的情况下导入新文件；导入会永久替换现有网格内容
- 避免在列具有特定含义时保留默认字母标题（A、B、C……）；请立即重命名以明确含义
- 如果只需要摘要表，请避免导入非常大的数据集（数千行）；对于需要公式和图表支持的大型数据集，请考虑使用 SpreadJS Table 小插件
参考资料
外部资源
- GitHub 上的 react-data-grid — 底层开源库文档