Angular 데이터 그리드의 축소 가능한 열 그룹

다중 열 헤더를 사용하면 여러 수준의 중첩된 열과 열 그룹을 가질 수 있습니다. 또한 각 열 그룹을 축소 가능으로 표시하는 기능도 제공합니다. 접을 수 있는 다중 열 헤더를 사용 하면 축소/확장, 즉 현재 헤더 아래에 중첩된 헤더를 표시하거나 숨길 수 있으며, 이를 통해 예를 들어 단축/요약된 정보를 얻을 수 있습니다.

Angular Grid Collapsible Column Groups Overview Example

Setup

IgxGrid 및 축소 가능한 다중 열 헤더를 시작하려면 먼저 다음 명령을 입력하여 Ignite UI for Angular 설치해야 합니다.

ng add igniteui-angular

Ignite UI for Angular에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

다음 단계는 app.module.ts 파일에서 IgxGridModule 가져오는 것입니다. 또한 그리드에서 열 그룹을 설정하는 방법에 대한 자세한 정보를 보려면 다중 열 그룹 주제를 간략하게 살펴보는 것이 좋습니다.

Usage

축소 가능한 열 그룹은 열 그룹을 더 작은 데이터 세트로 축소/확장하는 방법을 제공하는 다중 열 헤더 기능의 일부입니다. 열 그룹이 축소되면 열의 하위 집합이 최종 사용자에게 표시되고 그룹의 다른 하위 열은 숨겨집니다. 축소/확장된 각 열은 그리드 데이터 소스에 바인딩되거나 바인딩 해제되어 계산될 수 있습니다.

열 그룹을 collapsible로 정의하려면 속성을 [collapsible]="true"로 설정해야 하며 visibleWhenCollapsed 속성을 두 개 이상의 하위 열에 정의해야 한다는 점도 명심해야 합니다. 그룹이 축소되면 표시되고([visibleWhenCollapsed]="true") 그룹이 확장되면([visibleWhenCollapsed]="false") 하나 이상의 열이 숨겨져야 합니다. 그렇지 않으면 축소 가능 기능이 비활성화됩니다. 일부 하위 열에 visibleWhenCollapsed 지정되지 않은 경우 상위 상태가 확장되거나 축소되었는지 여부에 관계없이 이 열이 항상 표시됩니다.

그럼 아래 마크업을 살펴보겠습니다.

<igx-column-group header="Customer Information" [collapsible]="true"> <!-- Initially the column groups will be expanded--->
    <!--The column below will be visible when its parent is collapsed-->
    <igx-column field="CustomerName" header="Fullname" [dataType]="'string'" [visibleWhenCollapsed]="true"></igx-column>
    <!--The three columns below will be visible when its parent is expanded-->
    <igx-column field="CustomerID" header="Customer ID" [dataType]="'string'" [visibleWhenCollapsed]="false"></igx-column>
    <igx-column field="FirstName" header="First Name" [dataType]="'string'" [visibleWhenCollapsed]="false">
    </igx-column>
    <igx-column field="LastName" header="Last Name" [dataType]="'string'" [visibleWhenCollapsed]="false">
    </igx-column>
    <igx-column-group header="Customer Address"> <!--This column visibility will not be changed based on parent expand/collapsed state-->
        <igx-column field="Country" header="Country" [dataType]="'string'" [sortable]="true">
        </igx-column>
        <igx-column field="City" header="City" [dataType]="'string'" [sortable]="true">
        </igx-column>
    </igx-column-group>
</igx-column-group>

이제 요약해 보겠습니다. 모든 하위 열에는 세 가지 상태가 있습니다.

상위 항목의 확장 상태에 관계없이 항상 표시될 수 있습니다.
상위 항목이 축소되면 표시될 수 있습니다.
상위 항목이 축소되면 숨길 수 있습니다.

축소 가능으로 지정된 컬럼 그룹의 초기 상태는 [expanded]="true" 입니다. 그러나 [expanded]="false" 속성을 설정하여 이 동작을 쉽게 변경할 수 있습니다.

Expand/Collapse indicator template

igxGrid의 기본 확장 표시기는 다음과 같습니다.

igxGrid의 기본 축소 표시기는 다음과 같습니다.

또한 기본 확장/축소 표시기를 변경해야 하는 경우 입력 속성 또는 지시문을 통해 이를 수행할 수 있는 두 가지 쉬운 방법을 제공합니다.

Using an input property

사용자 정의 확장/축소 템플릿을 정의하고 collapsibleIndicatorTemplate 입력 속성을 사용하여 각 축소 가능한 열 그룹에 이를 제공할 수 있습니다. 아래 마크업을 확인하세요.

<ng-template #indTemplate let-column="column">
    <igx-icon [attr.draggable]="false" >{{column.expanded ? 'remove' : 'add'}} </igx-icon>
</ng-template>
<igx-column-group header="Customer Information" [collapsible]="true" [collapsibleIndicatorTemplate]="indTemplate">
    <igx-column field="CustomerName" header="Fullname" [dataType]="'string'" [visibleWhenCollapsed]="true"></igx-column>
    <igx-column field="CustomerID" header="Customer ID" [dataType]="'string'" [visibleWhenCollapsed]="false"></igx-column>
    <igx-column-group header="Customer Address" [collapsible]="true" [collapsibleIndicatorTemplate]="indTemplate">
        <igx-column field="Country" header="Country" [dataType]="'string'" [sortable]="true" [visibleWhenCollapsed]="true"></igx-column>
        <igx-column field="City" header="City" [dataType]="'string'" [sortable]="true" [visibleWhenCollapsed]="false"></igx-column>
    </igx-column-group>
</igx-column-group>

Using igxCollapsibleIndicator directive

이 동작을 달성하는 또 다른 방법은 아래 예에 표시된 대로 igxCollapsibleIndicator 지시문을 사용하는 것입니다.

<igx-column-group header="Customer Information" [collapsible]="true">
    <ng-template igxCollapsibleIndicator let-column="column">
        <igx-icon [attr.draggable]="false">{{column.expanded ? 'remove' : 'add'}} </<igx-icon>
    </ng-template>
    <igx-column field="CustomerName" header="Fullname" [dataType]="'string'" [visibleWhenCollapsed]="true"></igx-column>
    <igx-column field="CustomerID" header="Customer ID" [dataType]="'string'" [visibleWhenCollapsed]="false"></igx-column>
    <igx-column-group header="Customer Address" [collapsible]="true">
        <igx-column field="Country" header="Country" [dataType]="'string'" [sortable]="true" [visibleWhenCollapsed]="true"></igx-column>
        <igx-column field="City" header="City" [dataType]="'string'" [sortable]="true" [visibleWhenCollapsed]="false"></igx-column>
    </igx-column-group>
</igx-column-group>

Note

초기에 그룹 축소 옵션은 열 숨김보다 우선합니다. 숨김 속성을 사용하여 열을 숨기도록 선언하고 동일한 열이 표시되어야 하는 그룹을 정의한 경우 해당 열이 표시됩니다.

API References

Additional Resources

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