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

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

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

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

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

Smart Picture

Smart Picture 智能高效的图片处理工具

下载

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 则自由进行单元格级多选与复制。这是一种轻量、稳定且无需修改库源码的工程化实践。