Angular Igx Grid 同列多单元格同时编辑可行性问询

是的，Ignite UI for Angular的Igx Grid组件支持同一列多个单元格的同时编辑，并且能实时显示数据变更。以下是具体的实现方案：

• 启用多单元格编辑模式
  首先在Igx Grid的配置中开启多单元格编辑功能，需要设置editingMode为'cell'，同时开启multiCellEditing属性：

  <igx-grid #grid 
            [data]="gridData" 
            [editingMode]="'cell'" 
            [multiCellEditing]="true"
            [autoGenerate]="false">
    <!-- 自定义列定义 -->
  </igx-grid>
  

• 选中同一列的多个单元格
  你可以通过两种方式选中目标单元格：

  • 手动操作：按住Ctrl键点击同一列的多个单元格，或者点击列头后拖动鼠标选中整列的连续单元格；
  • 代码控制：通过Grid API批量选中指定列的单元格，示例如下：

    import { IgxGridComponent } from 'igniteui-angular';
    
    // 假设组件中已通过ViewChild获取到Grid实例
    @ViewChild('grid', { static: true }) public grid: IgxGridComponent;
    
    selectColumnCells(fieldName: string, startRowIndex: number, endRowIndex: number) {
      const targetColumn = this.grid.getColumnByField(fieldName);
      if (!targetColumn) return;
    
      for (let i = startRowIndex; i <= endRowIndex; i++) {
        this.grid.selectCell(i, targetColumn.field);
      }
    }
    

• 实现批量编辑与实时数据同步
  使用Igx Grid的内置编辑器或自定义编辑模板，当你在任意一个选中的单元格中输入新值时，所有选中的单元格会同步更新，且绑定的数据源会实时变更。以文本编辑器为例：

  <igx-column field="productStock" header="库存数量" dataType="number">
    <ng-template igxCellEditor let-cell="cell">
      <input igxInput 
             [(ngModel)]="cell.value" 
             (input)="onCellInput(cell)" />
    </ng-template>
  </igx-column>
  

  组件类中处理输入事件，确保数据实时同步到数据源：

  onCellInput(cell: IgxGridCellComponent) {
    // 数据源会自动同步，此处可添加额外的业务逻辑（如校验、日志）
    this.gridData[cell.row.index][cell.column.field] = cell.value;
  }
  

• 实时变更的验证
  完成上述配置后，在选中的单元格中输入值时，所有选中的单元格会立即显示新内容，同时绑定的gridData数组也会实时更新，无需手动触发Grid刷新。

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