Пользовательский интерфейс Infragistics Ignite для Angular Grid (IGX Grid) — это мощный компонент сетки данных, который предлагает различные функции для отображения табличных данных и управления ими. Одним из общих требований является извлечение выбранных строк из сетки. В этой статье мы рассмотрим семь различных методов достижения этой цели, а также приведем примеры кода. Итак, приступим!

Метод 1: использование событий выбора

// HTML
<igx-grid (selectionChange)="onSelectionChange($event)"></igx-grid>
// TypeScript
onSelectionChange(event: ISelectionEventArgs) {
  const selectedRows = event.newSelection;
  // Use selectedRows for further processing
}

Метод 2. Использование Grid API

// TypeScript
import { IgxGridComponent } from "igniteui-angular";
// Access the grid instance
@ViewChild("grid", { static: true }) grid: IgxGridComponent;
// Retrieve selected rows
const selectedRows = this.grid.selectedRows;

Метод 3: использование директивы выбора строк

// HTML
<igx-grid [data]="data" igxRowSelection></igx-grid>
// TypeScript
import { IgxRowSelectionDirective } from "igniteui-angular";
// Access the directive instance
@ViewChild(IgxRowSelectionDirective, { static: true }) rowSelection: IgxRowSelectionDirective;
// Retrieve selected rows
const selectedRows = this.rowSelection.selectedRows;

Метод 4. Использование флажка

// HTML
<igx-grid [data]="data" [rowSelectable]="true"></igx-grid>
// TypeScript
// Retrieve selected rows
const selectedRows = this.grid.selectedRows;

Метод 5. Использование события щелчка по строке

// HTML
<igx-grid (rowClick)="onRowClick($event)"></igx-grid>
// TypeScript
onRowClick(event: IGridRowEventArgs) {
  const selectedRow = event.row;
  // Use selectedRow for further processing
}

Метод 6: использование столбца произвольного выбора

// HTML
<igx-grid [data]="data">
  <igx-column field="id" header="ID"></igx-column>
  <igx-column header="Select">
    <ng-template igxCell let-cell="cell" let-row="row">
      <igx-checkbox [(ngModel)]="row.isSelected"></igx-checkbox>
    </ng-template>
  </igx-column>
</igx-grid>
// TypeScript
// Retrieve selected rows
const selectedRows = this.grid.data.filter(row => row.isSelected);

Метод 7: использование выбора строк с сохранением выбора

// HTML
<igx-grid [data]="data" [rowSelectable]="true" [rowSelectionKey]="'mySelectionKey'"></igx-grid>
// TypeScript
// Retrieve selected rows
const selectionState = this.grid.getRowSelectionState("mySelectionKey");
const selectedRows = this.grid.data.filter((row, index) => selectionState[index]);

Извлечение выбранных строк в сетке IGX можно выполнить с помощью различных методов, включая события выбора, API сетки, директивы выбора строк, выбор флажка, события щелчка строки, настраиваемые столбцы выбора и выбор строки с сохранением выбора. Каждый метод имеет свои преимущества и подходит для разных сценариев. Реализовав соответствующий метод, вы сможете эффективно работать с выбранными строками в IGX Grid.