如何在Ignite UI for Angular igx-grid中临时禁用筛选与排序

我刚好遇到过一模一样的情况——编辑或添加行时输入内容触发自动排序，导致新行或者编辑行乱跑，同时还需要临时禁用筛选和排序功能，保存后恢复。以下是亲测有效的解决方案：

核心思路 #

在编辑/添加行开始时，先保存当前网格的筛选和排序状态，然后清空排序（避免输入时自动触发排序），同时禁用列的筛选和排序交互；等保存操作完成后，再恢复之前的筛选和排序状态，重新启用交互。

步骤1：组件中定义状态变量 #

首先在你的组件类里添加几个变量，用来保存原始状态和标记编辑状态：

import { IgxGridComponent, IGridEditEventArgs, IGridAddRowEventArgs, IGridEditDoneEventArgs, IGridRowAddedEventArgs } from 'igniteui-angular';

// 引用网格组件
@ViewChild('grid') grid!: IgxGridComponent;

// 保存原始筛选条件
private originalFilters: any[] = [];
// 保存原始排序规则
private originalSorting: any[] = [];
// 标记是否处于编辑/添加状态
isEditingOrAdding = false;

步骤2：模板中绑定网格事件和列属性 #

在igx-grid模板里绑定编辑、添加相关的事件，同时把列的sortable和filterable属性绑定到编辑状态的取反值，这样编辑时自动禁用这些功能：

<igx-grid #grid
          [data]="yourDataSource"
          (onEditStarting)="handleEditStarting($event)"
          (onRowEditDone)="handleEditDone($event)"
          (onAddRowStarting)="handleAddRowStarting($event)"
          (onRowAdded)="handleRowAdded($event)">
  
  <!-- 示例列：根据isEditingOrAdding动态控制筛选排序 -->
  <igx-column field="productName" header="Product Name" 
              [sortable]="!isEditingOrAdding" 
              [filterable]="!isEditingOrAdding">
  </igx-column>
  
  <!-- 其他列同理 -->
  <igx-column field="price" header="Price" 
              [sortable]="!isEditingOrAdding" 
              [filterable]="!isEditingOrAdding">
  </igx-column>
  
  <!-- 添加编辑列 -->
  <igx-column [editable]="true" [hasSummary]="false">
    <ng-template igxCell let-cell="cell">
      <igx-icon *ngIf="cell.editMode" (click)="grid.endEdit(cell.row)">done</igx-icon>
      <igx-icon *ngIf="!cell.editMode" (click)="grid.startEdit(cell.row)">edit</igx-icon>
    </ng-template>
  </igx-column>
  
</igx-grid>

步骤3：实现状态保存与恢复的方法 #

在组件类里实现事件处理方法，负责保存原始状态、清空临时排序，以及完成编辑后恢复状态：

// 开始编辑时触发
handleEditStarting(event: IGridEditEventArgs) {
  this.isEditingOrAdding = true;
  // 保存当前的筛选和排序状态
  this.originalFilters = [...this.grid.filteringExpressions];
  this.originalSorting = [...this.grid.sortingExpressions];
  // 清空排序，防止编辑时输入内容触发自动排序
  this.grid.sortingExpressions = [];
  // 如果需要同时清空筛选，可以取消下面的注释
  // this.grid.filteringExpressions = [];
}

// 开始添加新行时触发
handleAddRowStarting(event: IGridAddRowEventArgs) {
  this.isEditingOrAdding = true;
  this.originalFilters = [...this.grid.filteringExpressions];
  this.originalSorting = [...this.grid.sortingExpressions];
  this.grid.sortingExpressions = [];
}

// 编辑完成时触发（这里假设是同步保存，如果是异步请调整）
handleEditDone(event: IGridEditDoneEventArgs) {
  // 这里加入你的保存逻辑，比如调用API保存修改
  // await this.yourService.saveRow(event.rowData);
  
  // 保存完成后恢复网格状态
  this.restoreGridState();
}

// 新行添加完成时触发
handleRowAdded(event: IGridRowAddedEventArgs) {
  // 保存新行数据的逻辑
  // await this.yourService.addRow(event.rowData);
  
  this.restoreGridState();
}

// 私有方法：恢复原始的筛选和排序状态
private restoreGridState() {
  this.isEditingOrAdding = false;
  // 恢复排序规则
  this.grid.sortingExpressions = [...this.originalSorting];
  // 恢复筛选条件
  this.grid.filteringExpressions = [...this.originalFilters];
}

处理异步保存的情况 #

如果你的保存操作是异步的（比如调用后端API），一定要在API调用成功后再恢复状态，避免状态提前恢复：

async handleEditDone(event: IGridEditDoneEventArgs) {
  try {
    // 调用异步保存接口
    await this.productService.updateProduct(event.rowData);
    // 保存成功后恢复状态
    this.restoreGridState();
  } catch (error) {
    // 处理保存失败的情况，比如提示用户，保持编辑状态
    console.error('保存失败', error);
    // 可以选择不恢复状态，让用户继续编辑
    // this.isEditingOrAdding = true;
  }
}

关键说明 #

• 清空sortingExpressions是解决输入时自动排序的核心：因为Igx Grid在单元格值变化时，如果有排序规则，会自动重新排序，清空后就不会触发这个行为了。
• 动态绑定sortable和filterable可以防止用户在编辑期间手动触发筛选或排序，避免干扰编辑流程。
• 保存原始状态是为了在编辑完成后回到用户之前的视图状态，提升体验。

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