本文介绍在 angular-slickgrid 中实现 excel 风格的混合选择机制：通过点击行索引列切换为行选择，其余区域保持多单元格选择，解决 `enableexcelcopybuffer` 与 `enablerowselection` 冲突问题。
Angular-Slickgrid 基于原生 SlickGrid，其底层仅允许单一选择模型激活——即要么启用 SlickCellSelectionModel（支持多单元格选择、复制粘贴），要么启用 SlickRowSelectionModel（支持整行高亮与操作）。因此，当 enableRowSelection: true 时，enableExcelCopyBuffer: true 将失效；反之亦然。但实际业务中常需类似 Excel 的交互体验：点击左侧行号列（row index）选中整行，点击数据区域则进入自由单元格选择模式。
实现该效果的核心思路是：动态切换选择模型（Selection Model），并配合手动触发视图刷新。具体步骤如下：
- 禁用默认行选择：enableRowSelection 必须设为 false，以保留单元格选择能力；
- 添加显式索引列：在列定义中插入一列（如 id: 'row-index'），使用 formatter: rowNumberFormatter 显示行号，并设置 selectable: false 防止被单元格选择捕获；
- 监听全局点击事件：利用 (onClick) 输出参数 args.cell 判断点击列索引（例如 args.cell === 0 表示点击第一列——即索引列）；
-
按需切换模型：
- 若点击索引列且当前为单元格模型 → 切换为 SlickRowSelectionModel；
- 若点击非索引列且当前为行模型 → 切换回 SlickCellSelectionModel；
- 强制重绘：每次切换后必须调用 slickGrid.invalidate()，否则 UI 不更新（注意：render() 方法不生效，invalidate() 才是正确 API）。
以下是关键代码示例（含完整列配置与事件处理）：
// 列定义：首列为行索引列
this.columnDefinitions = [
{
id: 'row-index',
name: '#',
field: 'rowIndex',
width: 40,
resizable: false,
selectable: false, // 关键：避免被单元格选择逻辑捕获
formatter: (row: number) => row + 1 // 或使用 rowNumberFormatter
},
{ id: 'name', name: 'Name', field: 'name', sortable: true },
{ id: 'age', name: 'Age', field: 'age', sortable: true }
];
// Grid 配置
this.gridOptions = {
enableCellNavigation: true,
enableExcelCopyBuffer: true, // 启用单元格选择与复制
// ❌ 不要设置 enableRowSelection: true
};
// 点击处理器
onClick(event: Event, args: OnEventArgs) {
const grid = this.angularGrid?.slickGrid;
if (!grid) return;
// 假设索引列是第 0 列
const isIndexColumn = args.cell === 0;
const currentModel = grid.getSelectionModel();
const isCellModel = currentModel instanceof SlickCellSelectionModel;
const isRowModel = currentModel instanceof SlickRowSelectionModel;
if (isIndexColumn && isCellModel) {
// 点击索引列 → 切换为行选择
grid.setSelectionModel(new SlickRowSelectionModel());
grid.invalidate(); // 必须调用！
} else if (!isIndexColumn && isRowModel) {
// 点击数据列 → 切换回单元格选择
grid.setSelectionModel(new SlickCellSelectionModel());
grid.invalidate();
}
}⚠️ 注意事项：
- SlickRowSelectionModel 和 SlickCellSelectionModel 需从 'slickgrid-ng' 或 'slickgrid-core' 正确导入（版本差异可能导致路径不同）；
- 行选择状态下，getSelectedRows() 返回行索引数组；单元格选择状态下，需通过 getSelectedRanges() 获取 CellRange 对象；
- 若需持久化选中状态（如切换模型后保留之前选择），需自行缓存并手动恢复，因模型切换会清空原有选择；
- 在 Angular 中，确保 onClick 绑定发生在 angularGridReady 之后，且 this.angularGrid 已初始化。
通过该方案，你无需放弃任何功能——既保留 Excel 式的高效复制粘贴，又获得直观的行级操作入口，真正实现灵活、专业、贴近用户直觉的数据网格交互体验。
