Web Components 계층적 그리드 축소 가능한 열 그룹 개요

    The Ignite UI for Web Components Collapsible Column Groups feature in Web Components Hierarchical Grid allows you to organize and manage multiple levels of nested columns and column groups in the IgcHierarchicalGridComponent by grouping them together and providing the option to collapse or expand these groups for improved data visualization and navigation.

    Web Components Hierarchical Grid Collapsible Column Groups Example

    Setup

    시작하려면IgcHierarchicalGridComponent 그리고 접이식 다중 열 헤더 feature, 먼저 다음 명령어를 입력하여 Ignite UI for Web Components을 설치해야 합니다:

    npm install --save igniteui-webcomponents-core
npm install --save igniteui-webcomponents-grids

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

    또한 그리드에서 열 그룹을 설정하는 방법에 대한 자세한 내용을 보려면 다중 열 헤더 항목을 간략하게 살펴보는 것이 좋습니다.

    Usage

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

    열 그룹을 접을 수 있는 그룹으로 정의하려면, 다음을 설정해야 합니다.collapsible 재산에 관한columnGroup 받는 사람 참.

    속성을visibleWhenCollapsed 최소 두 개의 자식 열로 정의해야 합니다. 그룹을 접을 때 최소 한 개의 열이 보여야 하며(visibleWhenCollapsed​true로 설정), 그룹을 확장할 때는 최소 한 개의 열이 숨겨져야 하며(visibleWhenCollapsed로false 설정), 그렇지 않으면 접힘 기능이 비활성화됩니다.visibleWhenCollapsed 만약 일부 자식 열에 대해 지정되지 않으면, 부모 상태가 확장되었든 접혔든 상관없이 이 열은 항상 보이게 됩니다.

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

    <igc-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-->
    <igc-column field="CustomerName" header="Fullname" data-type="String" visible-when-collapsed="true"></igc-column>
    <!--The three columns below will be visible when its parent is expanded-->
    <igc-column field="CustomerID" header="Customer ID" data-type="String" visible-when-collapsed="false"></igc-column>
    <igc-column field="FirstName" header="First Name" data-type="String" visible-when-collapsed="false">
    </igc-column>
    <igc-column field="LastName" header="Last Name" data-type="String" visible-when-collapsed="false">
    </igc-column>
    <igc-column-group header="Customer Address"> <!--This column visibility will not be changed based on parent expand/collapsed state-->
        <igc-column field="Country" header="Country" data-type="String" sortable="true">
        </igc-column>
        <igc-column field="City" header="City" data-type="String" sortable="true">
        </igc-column>
    </igc-column-group>
</igc-column-group>

    요약하면 모든 하위 열에는 세 가지 상태가 있습니다.

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

    축소 가능한 열(collapsible)로 지정된 초기 상태는expanded​ ​true로 설정되어 있지만, false로 설정 하면 쉽게 변경할 수 있습니다.

    Expand/Collapse Indicator Template

    기본 확장 표시IgcHierarchicalGridComponent 기는 다음과 같습니다:

    expand_indicator

    기본 붕괴 표시IgcHierarchicalGridComponent 기는 다음과 같습니다:

    collapsed_indicator

    또한 기본 확장/축소 표시기를 변경해야 하는 경우 이를 달성하기 위해 템플릿 옵션을 제공합니다.

    <igc-column-group id="info" header="Customer Information" collapsible="true">
    <igc-column field="CustomerName" header="Fullname" data-type="String" visible-when-collapsed="true"></igc-column>
    <igc-column field="CustomerID" header="Customer ID" data-type="String" visible-when-collapsed="false"></igc-column>
    <igc-column-group id="address" header="Customer Address" collapsible="true">
        <igc-column field="Country" header="Country" data-type="String" sortable="true" visible-when-collapsed="true"></igc-column>
        <igc-column field="City" header="City" data-type="String" sortable="true" visible-when-collapsed="false"></igc-column>
    </igc-column-group>
</igc-column-group>

    constructor() {
    var info = document.getElementById('info') as IgcColumnGroupComponent;
    var address = document.getElementById('address') as IgcColumnGroupComponent;
    info.collapsibleIndicatorTemplate = this.indTemplate;
    address.collapsibleIndicatorTemplate = this.indTemplate;
}

public indTemplate = (ctx: IgcColumnTemplateContext) => {
    return html`
        <igc-icon name="${ctx.column.expanded ? 'remove' : 'add'}" draggable="false"></igc-icon>
    `;
}

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

    API References

    Additional Resources

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