Angular-slickgrid：启用多单元格选择时如何支持行选择？

核心思路 #

默认情况下enableRowSelection和enableExcelCopyBuffer确实无法共存，要实现类似Excel的交互，得放弃默认行选择，改用自定义行索引点击事件+手动选中整行单元格的方式，同时保留多单元格选择功能。

具体实现步骤 #

1. 基础配置初始化
   先关闭默认行选择，开启Excel复制缓冲区以支持多单元格选择：

   this.gridOptions = {
     enableRowSelection: false,
     enableExcelCopyBuffer: true,
     // 其他配置...
   };
   

2. 自定义行索引列的点击事件
   如果用的是默认行号列（或自定义的行索引列），给它绑定点击事件，手动选中当前行的所有单元格：

   // 假设行索引列的field为'__index'，根据实际列配置调整
   this.gridOptions.columnDefinitions.forEach(col => {
     if (col.field === '__index') {
       col.onClick = (e, args) => {
         const rowIdx = args.row;
         const totalCols = this.gridOptions.columnDefinitions.length;
         const rowRanges = [];
   
         // 构造当前行所有单元格的选中范围
         for (let colIdx = 0; colIdx < totalCols; colIdx++) {
           rowRanges.push({
             row: rowIdx,
             cell: colIdx,
             row2: rowIdx,
             cell2: colIdx
           });
         }
   
         // 应用选中范围
         this.gridService.setSelectedRanges(rowRanges);
       };
     }
   });
   

3. 优化多选交互（可选）
   要支持按住Ctrl键点击行索引实现多整行选择，在点击事件里判断Ctrl键状态，合并或移除选中范围：

   col.onClick = (e, args) => {
     const rowIdx = args.row;
     const totalCols = this.gridOptions.columnDefinitions.length;
     const newRowRanges = [];
   
     for (let colIdx = 0; colIdx < totalCols; colIdx++) {
       newRowRanges.push({ row: rowIdx, cell: colIdx, row2: rowIdx, cell2: colIdx });
     }
   
     let currentRanges = this.gridService.getSelectedRanges() || [];
     if (e.ctrlKey) {
       // 检查当前行是否已选中，切换选中状态
       const isRowSelected = currentRanges.some(range => range.row === rowIdx && range.row2 === rowIdx);
       if (isRowSelected) {
         currentRanges = currentRanges.filter(range => !(range.row === rowIdx && range.row2 === rowIdx));
       } else {
         currentRanges = [...currentRanges, ...newRowRanges];
       }
     } else {
       // 非Ctrl点击直接替换为当前行选中
       currentRanges = newRowRanges;
     }
   
     this.gridService.setSelectedRanges(currentRanges);
   };
   

4. 解决动态修改配置无效的问题
   之前直接修改gridOptions后调用render无效，是因为Angular-Slickgrid需要用官方方法更新配置：

   // 如需临时切换配置，用gridService的updateGridOptions方法
   this.gridService.updateGridOptions({ enableRowSelection: true });
   // 切回单元格选择模式
   this.gridService.updateGridOptions({ enableRowSelection: false });
   

内容的提问来源于stack exchange，提问作者Fab