Angular Cell Merging

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

Angular Cell Merging Example

Enabling and Using Cell Merging

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

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

Grid Merge Mode

그리드는 열거형의 값을 허용하는 속성을 노출 cellMergeMode 합니다. GridCellMergeMode

always- 정렬 상태에 관계없이 병합 조건을 충족하는 인접한 셀을 병합합니다.
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';

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

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

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- 두 개의 인접한 레코드를 병합해야 하는지 여부를 결정하는 조건을 정의합니다.

인터페이스 IgxTreeGrid:and ByLevelTreeGridMergeStrategy를 DefaultTreeGridMergeStrategy 구현 IGridMergeStrategy 하는 두 가지 기본 제공 전략을 제공합니다. DefaultTreeGridMergeStrategy 계층 수준에 관계없이 동일한 값을 가진 모든 셀을 병합합니다. 반대로, ByLevelTreeGridMergeStrategy 셀은 값이 같고 동일한 수준에 있는 경우에만 병합하므로 수준은 병합에 필요한 조건입니다.

Extending the Default Strategy

동작의 일부(예: 비교자 논리)만 사용자 지정하려는 경우 기본 제공 전략 중 하나인 DefaultTreeGridMergeStrategy or 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;
    }
}

Applying a Custom Strategy

정의되면 속성을 통해 그리드에 전략을 할당합니다. 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();

Feature Integration

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

Excel 내보내기: 병합된 셀은 Excel로 내보낼 때 병합된 상태로 유지됩니다.
열 고정: 열이 고정될 때 셀은 병합된 상태로 유지되고 고정된 영역에 표시됩니다.
행 고정: 셀은 포함된 영역 내에서만 병합됩니다(즉, 고정된 행의 셀은 고정된 다른 행의 셀과만 병합되는 반면, 고정되지 않은 행의 셀은 고정되지 않은 행의 셀과만 병합됩니다.
탐색/활성화: 셀이 활성화되면 동일한 행의 병합된 모든 셀이 단일 셀이 됩니다. 여기에는 키보드 탐색을 통한 활성화도 포함됩니다.

Note

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

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

API References

Additional Resources

트리 그리드 개요

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

Angular Cell Merging