Angular Data Grid의 축소 가능한 열 그룹

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

Angular Grid Collapsible Column Groups Overview Example

Setup

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

ng add igniteui-angular

Ignite UI for Angular에 대한 전체 소개는 시작 항목을 참조하십시오.

The next step is to import the IgxTreeGridModule in the app.module.ts file. Also, we strongly suggest that you take a brief look at multi-column groups topic, to see more detailed information on how to setup the column groups in your grid.

Usage

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

In order to define a column group as collapsible, you need to set the property to [collapsible]="true" and also keep in mind that you need to define the property visibleWhenCollapsed to at least two child columns: at least one column must be visible when the group is collapsed ([visibleWhenCollapsed]="true") and at least one column must be hidden when the group is expanded ([visibleWhenCollapsed]="false"), otherwise the collapsible functionality will be disabled. If visibleWhenCollapsed is not specified for some of the child columns, then this column will be always visible no matter whether the parent state is expanded or collapsed.

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

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

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

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

The initial state of the column group which is specified as collapsible is [expanded]="true". But you can easily change this behavior by setting the property [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

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