如何在 Angular-SlickGrid 中同时启用行选择与单元格多选

angular-slickgrid 默认不支持同时启用 `enablerowselection` 和 `enableexcelcopybuffer`，但可通过动态切换选择模型（`slickcellselectionmodel` ↔ `slickrowselectionmodel`）实现类似 excel 的交互：点击行号列触发行选择，其余区域保持单元格多选。

在 Angular-SlickGrid 中，enableExcelCopyBuffer: true 会自动启用 SlickCellSelectionModel，从而支持跨单元格复制与多选；而 enableRowSelection: true 则强制使用 SlickRowSelectionModel，二者互斥。官方未提供开箱即用的混合模式，但可通过监听网格点击事件、按列位置智能切换选择模型来模拟 Excel 行选择行为。

核心思路是：添加一列作为“行索引列”（如序号列），当用户点击该列时，将选择模型切换为行选择模式；点击其他列时，则切回单元格选择模式。切换后必须调用 invalidate() 强制重绘，否则 ui 不会响应。

以下为完整实现示例（基于 Angular + Angular-SlickGrid v7+）：

import { Component, OnInit } from '@angular/core'; import {   AngularGridInstance,   GridOption,   SlickCellSelectionModel,   SlickRowSelectionModel, } from 'angular-slickgrid';  @Component({   selector: 'app-grid',   template: `` }) export class GridComponent implements OnInit {   angularGrid!: AngularGridInstance;   gridOptions!: GridOption;   columnDefinitions = [     { id: 'index', name: '#', field: 'index', width: 40, selectable: false, resizable: false },     { id: 'name', name: 'Name', field: 'name' },     { id: 'age', name: 'Age', field: 'age', formatter: (_row, _cell, value) => value || '-' }   ];   dataset = [     { index: 1, name: 'Alice', age: 32 },     { index: 2, name: 'Bob', age: 28 },     { index: 3, name: 'Charlie', age: 35 }   ];    ngonInit(): void {     this.gridOptions = {       enableCellNavigation: true,       enableExcelCopyBuffer: true, // 启用单元格多选与 Ctrl+C/V       autoResize: { containerId: 'grid-container', sidePadding: 15 },       // ❌ 不要设置 enableRowSelection: true —— 它会覆盖 cell selection     };   }    angularGridReady(grid: AngularGridInstance) {     this.angularGrid = grid;   }    onClick(event: Event, args: any) {     // 假设 index 列是第 0 列（对应 args.cell === 0）     const isIndexColumnClick = args.cell === 0;      const currentModel = this.angularGrid.slickGrid.getSelectionModel();     const isCellModel = currentModel instanceof SlickCellSelectionModel;     const isRowModel = currentModel instanceof SlickRowSelectionModel;      if (isIndexColumnClick && isCellModel) {       // 点击序号列 → 切换为行选择       this.angularGrid.slickGrid.setSelectionModel(new SlickRowSelectionModel());       this.angularGrid.slickGrid.invalidate(); // ⚠️ 必须调用！否则无视觉反馈     } else if (!isIndexColumnClick && isRowModel) {       // 点击非序号列 → 切回单元格选择       this.angularGrid.slickGrid.setSelectionModel(new SlickCellSelectionModel());       this.angularGrid.slickGrid.invalidate();     }   } }

✅ 关键注意事项：

• selectable: false 设置于序号列可防止其被单元格选择逻辑捕获，提升点击准确性；
• invalidate() 是必需步骤——它通知 SlickGrid 重新渲染选中状态，否则模型已切换但 UI 不更新；
• 若需保留已选内容（如切换后不取消之前选择），可在切换前缓存 getSelectedRows() 或 getSelectedCells()，并在新模型下手动恢复（需额外逻辑）；
• 务必确保 enableCellNavigation: true，否则单元格选择不可用；
• 避免在模板中同时设置 enableRowSelection 和 enableExcelCopyBuffer，二者底层冲突。

通过该方案，用户获得接近 Excel 的体验：单击左侧序号列即整行高亮并支持行操作（如删除、批量编辑），而在数据区域内拖选或 Ctrl+Click 则自由进行单元格级多选与复制。这是一种轻量、稳定且无需修改库源码的工程化实践。