Web Components Visão geral dos grupos de colunas recolhíveis da grade de árvore

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

    Web Components Tree Grid Collapsible Column Groups Example

    Setup

    Para começar com oIgcTreeGridComponent recurso de cabeçalhos multi-colunas dobráveis e de e colapsáveis, primeiro você precisa instalar Ignite UI for Web Components digitando o seguinte comando:

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

    Para obter uma introdução completa ao Ignite UI for Web Components, leia o tópico de introdução.

    Além disso, sugerimos fortemente que você dê uma breve olhada no tópico de cabeçalhos de várias colunas, para ver informações mais detalhadas sobre como configurar os grupos de colunas em sua grade.

    Usage

    Grupos de colunas recolhíveis faz parte do recurso de cabeçalhos de várias colunas que fornece uma maneira de recolher/expandir um grupo de colunas para um conjunto menor de dados. Quando um grupo de colunas é recolhido, um subconjunto das colunas será mostrado ao usuário final e as outras colunas filho do grupo serão ocultadas. Cada coluna recolhida/expandida pode ser associada à fonte de dados da grade ou pode ser desvinculada, assim calculada.

    Para definir um grupo de colunas como colapsável, você precisa definir acollapsible propriedade em comocolumnGroup​ ​verdadeira.

    Você precisa definir a propriedadevisibleWhenCollapsed para pelo menos duas colunas filhas. Pelo menos uma coluna deve estar visível quando o grupo for colapsado (visibleWhenCollapseddefinido para verdadeiro) e pelo menos uma coluna deve ser ocultada quando o grupo for expandido (visibleWhenCollapseddefinido parafalse), caso contrário a funcionalidade colapsável será desativada. SevisibleWhenCollapsed não for especificado para algumas das colunas filhas, então essa coluna estará sempre visível, independentemente de o estado pai estar expandido ou colapsado.

    Vejamos a marcação abaixo:

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

    Para resumir, cada coluna filho tem três estados:

    • Pode estar sempre visível, independentemente do estado expandido de seu pai.
    • Pode ser visível quando seu pai está recolhido.
    • Pode ser ocultado quando seu pai está recolhido.

    O estado inicial do grupo de colunas especificado como colapsável éexpanded definido como verdadeiro, mas você pode facilmente mudar esse comportamento definindo-o como falso.

    Expand/Collapse Indicator Template

    O indicador padrão de expansão para oIgcTreeGridComponent é o seguinte:

    expand_indicator

    O indicador padrão de colapso para oIgcTreeGridComponent é o seguinte:

    collapsed_indicator

    Além disso, se você precisar alterar o indicador de expansão/recolhimento padrão, fornecemos opções de modelos para conseguir isso.

    <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>
    `;
}

    Nota Lembre-se de que inicialmente a opção de recolher grupo tem precedência sobre a coluna oculta - Se você declarou que sua coluna estava oculta usando a propriedade oculta e tem um grupo definido onde a mesma coluna deve ser mostrada, a coluna será mostrada.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.