Premium

Angular セル結合

Ignite UI for Angular の Grid には、同じ値を持つ隣接セルを 1 つの大きなセルに結合するセル結合機能があります。結合は列内で縦方向に適用され、重複する値を減らして可読性を向上させます。既定ではデータ値の一致でセル結合されるほか、カスタム条件を設定して結合するように構成できます。

Angular セル結合の例

セル結合の有効化と使用

グリッドでのセル結合は、以下の 2 つのレベルで制御されます:

グリッドレベルの結合モード - 結合がいつ適用されるかを決定
列レベルの結合トグル - どの列でセルを結合できるかを決定
Grid-level merge mode – determines when merging is applied.
Column-level merge toggle – determines which columns can merge cells.

グリッド結合モード

グリッドは、GridCellMergeMode 列挙型の値を受け入れる cellMergeMode プロパティを公開します。

always - ソート状態に関係なく、結合条件を満たすすべての隣接セルを結合。
onSort - 列がソートされているときのみ隣接セルを結合 (デフォルト値)。
always - Merges any adjacent cells that meet the merging condition, regardless of sort state.
onSort - Merges adjacent cells only when the column is sorted (default value).

<igx-grid [data]="data" [cellMergeMode]="cellMergeMode">
    ...
</igx-grid>

protected cellMergeMode: GridCellMergeMode = 'always';

列結合のトグル

列レベルでは、merge プロパティで結合の有効または無効を切り替えます。

<igx-column field="OrderID" [merge]="true"></igx-column>
<igx-column field="ShipperName" [merge]="false"></igx-column>

上記の例では:

OrderID 列は、隣接する重複値を結合します。
ShipperName 列は、結合を行わず通常通りに描画されます。
The OrderID column will merge adjacent duplicate values.
The ShipperName column will render normally without merging.

組み合わせた例

<igx-grid [data]="data" [cellMergeMode]="cellMergeMode" [autoGenerate]="false">
    <igx-column field="OrderID" header="Order ID" [merge]="true"></igx-column>
    <igx-column field="ShipperName" header="Shipper Name" [merge]="true"></igx-column>
    <igx-column field="Salesperson" header="Salesperson"></igx-column>
</igx-grid>

protected cellMergeMode: GridCellMergeMode = 'onSort';

この例では、グリッドは列がソートされている場合のみ結合を行い、Category 列と Product 列の両方で結合が有効になっています。

カスタム結合条件

always と onSort の組み込みモードに加えて、mergeStrategy プロパティを使用して独自の結合条件を定義することができます。このストラテジでは、セルの比較方法と結合範囲の計算方法の両方を制御します。

結合ストラテジインターフェイス

カスタム結合ストラテジは IGridMergeStrategy インターフェイスを実装する必要があります:

export interface IGridMergeStrategy {
    merge: (
        data: any[],
        field: string,
        comparer: (prevRecord: any, currentRecord: any, field: string) => boolean,
        result: any[],
        activeRowIndex?: number,
        grid?: GridType
    ) => any[];

    comparer: (prevRecord: any, record: any, field: string) => boolean;    
}

merge - 結合されたセルをどのように生成するかを定義。
comparer - 隣接するレコードを結合すべきかを判定する条件を定義。

デフォルトのストラテジを拡張

一部の動作 (例: comparer ロジック) のみをカスタマイズしたい場合は、組み込みの DefaultMergeStrategy を拡張し、必要なメソッドのみをオーバーライドできます。

export class MyCustomStrategy extends DefaultMergeStrategy {
    /* Merge only cells within their respective projects */
    public override comparer(prevRecord: any, record: any, field: string): boolean {
        const a = prevRecord[field];
        const b = record[field];
        const projA = prevRecord['ProjectName'];
        const projB = record['ProjectName'];
        return a === b && projA === projB;
    }
}

カスタムストラテジの適用

定義したカスタムストラテジは、mergeStrategy プロパティを通じてグリッドに割り当てます。

<igx-grid [data]="data" [mergeStrategy]="customStrategy">
  <igx-column field="ActionID" [merge]="true"></igx-column>
  <igx-column field="ProjectName" [merge]="true"></igx-column>
</igx-grid>

protected customStrategy = new MyCustomStrategy();

デモ

機能の統合

結合セルをクリックすると、結合シーケンス内でもっとも近いセルがアクティブになります。

更新/編集: アクティブ化によって結合シーケンスが分解されるため、編集モードになるのは単一セルのみです。
行の選択: 選択された行が結合セルと交差する場合、関連するすべての結合セルが選択対象としてマークされます。

If a merged cell is clicked, the closest cell from the merge sequence will become active.

Updating/Editing: since activation breaks the merge sequence, only a single cell will be in edit mode.
Row selection: if selected rows intersect merged cells, all related merged cells should be marked as part of the selection.

制限

既知の制限	説明
セルの結合は、複数行レイアウトとの組み合わせではサポートされません。	両方とも複雑なレイアウトを使用するため、同時に使用することはできません。このような無効な構成が検出された場合は警告が表示されます。

API リファレンス

その他のリソース

Grid 概要

コミュニティに参加して新しいアイデアをご提案ください。

Angular セル結合