Premium

Angular セル結合

Ignite UI for Angular の Tree 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-tree-grid [data]="data" [cellMergeMode]="cellMergeMode">
    ...
</igx-tree-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-tree-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-tree-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 - 隣接するレコードを結合すべきかを判定する条件を定義。

The IgxTreeGrid provides two built-in strategies that implement the IGridMergeStrategy interface: DefaultTreeGridMergeStrategy and ByLevelTreeGridMergeStrategy. DefaultTreeGridMergeStrategy merges all cells with the same value, regardless of their hierarchical level. In contrast, ByLevelTreeGridMergeStrategy only merges cells if they have the same value and are located at the same level, making level a required condition for merging.

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

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

export class MyCustomStrategy extends DefaultTreeGridMergeStrategy {
    /* 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-tree-grid [data]="data" [mergeStrategy]="customStrategy">
  <igx-column field="ActionID" [merge]="true"></igx-column>
  <igx-column field="ProjectName" [merge]="true"></igx-column>
</igx-tree-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 リファレンス

その他のリソース

Tree Grid 概要

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

Angular セル結合