Angular Cell Merging

Ignite UI for Angular 그리드는 동일한 값을 가진 두 개 이상의 인접한 셀을 하나의 더 큰 셀로 결합하는 셀 병합 기능을 제공합니다. 병합은 열 내에서 세로로 적용되며 중복 값을 줄여 가독성을 향상시키는 데 도움이 됩니다. 이 기능은 기본적으로 일치하는 데이터 값에 의해 또는 사용자 지정 조건을 적용하여 셀을 병합하도록 구성할 수 있습니다.

Angular Cell Merging Example

Enabling and Using Cell Merging

그리드의 셀 병합은 다음 두 가지 수준에서 제어됩니다.

그리드 수준 병합 모드 – 병합이 적용되는 시기를 결정합니다.
열 수준 병합 토글 – 셀을 병합할 수 있는 열을 결정합니다.

Grid Merge Mode

격자는 열거실cellMergeMode에서 값을 받아들이는 속성을 드러냅GridCellMergeMode 니다:

always- 정렬 상태와 상관없이 병합 조건을 충족하는 인접 셀들을 병합합니다.
onSort- 열이 정렬될 때만 인접한 셀을 병합합니다 (기본값).

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

protected cellMergeMode: GridCellMergeMode = 'always';

Column Merge Toggle

열 수준에서는 속성과merge 병합을 활성화하거나 비활성화할 수 있습니다.

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

위의 예에서:

The OrderID column will merge adjacent duplicate values.
ShipperName 열은 병합되지 않고 정상적으로 렌더링됩니다.

Combined Example

<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';

여기서 표는 열이 정렬될 때만 병합되도록 설정되며 범주 및 제품 열이 모두 병합되도록 구성됩니다.

Custom Merge Conditions

내장된 모드always와onSort 모드 외에도, 그리드는 속성을 통해mergeStrategy 셀을 병합하는 데 대한 맞춤 조건을 정의할 수 있게 해줍니다. 이 전략은 셀 비교 방식과 병합된 범위 계산 방식을 모두 제어합니다.

Merge Strategy Interface

맞춤형 병합 전략은 다음 인터페이스를 구현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- 인접한 두 레코드를 병합할지 결정하는 조건을 정의합니다.

Extending the Default Strategy

동작의 일부(예: 비교 로직)만 커스터마이징하고 싶다면, 내장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;
    }
}

Applying a Custom Strategy

정의가 끝나면, 다음 속성을 통해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();

Demo

Feature Integration

병합된 셀의 특정 동작으로 인해 그리드의 다른 기능 중 일부와 정확히 어떻게 연결되는지 주목해야 합니다.

확장/축소: 기능(예: 마스터-디테일, 그룹화 등)이 데이터가 아닌 행을 생성하면 셀 병합이 중단되고 그룹이 분할됩니다.
Excel 내보내기: 병합된 셀은 Excel로 내보낼 때 병합된 상태로 유지됩니다.
열 고정: 열이 고정될 때 셀은 병합된 상태로 유지되고 고정된 영역에 표시됩니다.
행 고정: 셀은 포함된 영역 내에서만 병합됩니다(즉, 고정된 행의 셀은 고정된 다른 행의 셀과만 병합되는 반면, 고정되지 않은 행의 셀은 고정되지 않은 행의 셀과만 병합됩니다.
탐색/활성화: 셀이 활성화되면 동일한 행의 병합된 모든 셀이 단일 셀이 됩니다. 여기에는 키보드 탐색을 통한 활성화도 포함됩니다.

Note

병합된 셀을 클릭하면 병합 시퀀스에서 가장 가까운 셀이 활성화됩니다.

업데이트/편집: 활성화하면 병합 시퀀스가 중단되므로 단일 셀만 편집 모드에 있습니다.
행 선택: 선택한 행이 병합된 셀과 교차하는 경우 관련된 모든 병합된 셀을 선택의 일부로 표시해야 합니다.

Limitations

알려진 제한 사항	설명
셀 병합은 다중 행 레이아웃과 함께 지원되지 않습니다.	둘 다 결합할 때 의미가 없는 복잡한 레이아웃에 걸쳐 있습니다. 이러한 잘못된 구성이 감지되면 경고가 발생합니다.

API References

Additional Resources

그리드 개요

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

Angular Cell Merging