mirror of
https://github.com/liubinfighter/csv-lite.git
synced 2026-07-22 05:43:52 +00:00
91 lines
No EOL
2.7 KiB
Markdown
91 lines
No EOL
2.7 KiB
Markdown
# 固定行列功能 (Sticky Headers & Columns)
|
||
|
||
## 概述
|
||
新增的固定行列功能允许用户通过简单的Pin/Unpin按钮来固定表格的特定行和列，在滚动大型CSV文件时保持重要的标题行和关键列始终可见。
|
||
|
||
## 使用方法
|
||
|
||
### 固定列
|
||
1. 将鼠标悬停在列标题（A, B, C...）上
|
||
2. 点击出现的📍图标来固定该列
|
||
3. 固定后图标变为📌，列将在水平滚动时保持可见
|
||
4. 再次点击📌图标可取消固定
|
||
|
||
### 固定行
|
||
1. 将鼠标悬停在行号（0, 1, 2...）上
|
||
2. 点击出现的📍图标来固定该行
|
||
3. 固定后图标变为📌，行将在垂直滚动时保持可见
|
||
4. 再次点击📌图标可取消固定
|
||
|
||
## 技术实现
|
||
|
||
### 核心技术
|
||
- **CSS Position Sticky**: 使用原生CSS sticky定位实现流畅的固定效果
|
||
- **动态类管理**: 通过JavaScript动态添加/移除`.csv-sticky-row`和`.csv-sticky-col`类
|
||
- **事件驱动**: 基于用户点击事件的响应式Pin/Unpin机制
|
||
|
||
### 架构特点
|
||
- **保持原有结构**: 不破坏现有的单一表格结构，完全兼容现有功能
|
||
- **性能优化**: 使用CSS sticky而非JavaScript滚动监听，性能更佳
|
||
- **灵活配置**: 支持任意数量的行列同时固定
|
||
|
||
### 样式层次
|
||
```css
|
||
.csv-sticky-row {
|
||
position: sticky !important;
|
||
top: 0;
|
||
z-index: 20;
|
||
}
|
||
|
||
.csv-sticky-col {
|
||
position: sticky !important;
|
||
left: 0;
|
||
z-index: 15;
|
||
}
|
||
|
||
.csv-sticky-row.csv-sticky-col {
|
||
z-index: 25; /* 交叉区域最高优先级 */
|
||
}
|
||
```
|
||
|
||
## 优势对比
|
||
|
||
### vs 四象限方案
|
||
- ✅ **兼容性好**: 保持原有表格结构，所有现有功能无缝兼容
|
||
- ✅ **实现简单**: 无需复杂的四象限布局和滚动同步
|
||
- ✅ **性能更好**: 利用浏览器原生sticky性能优化
|
||
- ✅ **维护容易**: 代码结构清晰，易于调试和扩展
|
||
|
||
### vs 复杂UI面板
|
||
- ✅ **用户体验**: 直观的Pin/Unpin按钮，所见即所得
|
||
- ✅ **学习成本低**: 无需额外的配置界面，点击即用
|
||
- ✅ **空间节约**: 不占用额外的UI空间
|
||
|
||
## 文件变更
|
||
|
||
### 新增功能
|
||
- `src/view.ts`: 添加sticky状态管理和切换逻辑
|
||
- `src/view/table-render.ts`: 在表头添加Pin/Unpin按钮
|
||
- `styles.css`: 添加sticky样式和按钮样式
|
||
|
||
### 测试覆盖
|
||
- `test/sticky-functionality.test.ts`: 核心逻辑单元测试
|
||
|
||
## 使用场景
|
||
|
||
### 数据分析
|
||
- 固定表头行查看列含义
|
||
- 固定ID列追踪特定记录
|
||
- 固定日期列对比时间序列
|
||
|
||
### 大表格导航
|
||
- 1000+行数据滚动时保持标题可见
|
||
- 多列对比时固定关键基准列
|
||
- 分组数据查看时固定分组标识列
|
||
|
||
## 兼容性
|
||
- ✅ 所有现有CSV编辑功能
|
||
- ✅ 搜索和筛选功能
|
||
- ✅ 拖拽排序功能
|
||
- ✅ 列宽调整功能
|
||
- ✅ 右键菜单功能 |