Grupos de colunas recolhíveis na grade de dados Angular

Os cabeçalhos de várias colunas permitem que você tenha vários níveis de colunas aninhadas e grupos de colunas. Eles também fornecem a capacidade de marcar cada grupo de colunas como recolhível. Cabeçalhos de várias colunas recolhíveis possibilitam recolher/expandir, ou seja, mostrar e ocultar os cabeçalhos aninhados sob o atual, o que lhe dará uma informação abreviada/resumida, por exemplo.

Angular Grid Collapsible Column Groups Overview Example

Setup

Para começar a usar o IgxTreeGrid e os cabeçalhos de várias colunas recolhíveis, primeiro você precisa instalar Ignite UI for Angular digitando o seguinte comando:

ng add igniteui-angular

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

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

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.

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.

Então vamos ver a marcação abaixo:

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

E agora vamos 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;

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

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

O indicador de recolhimento padrão para o igxGrid é o seguinte:

Além disso, se você precisar alterar o indicador de expansão/recolhimento padrão, fornecemos duas maneiras fáceis de fazer isso - por meio de uma propriedade de entrada ou por meio de uma diretiva.

Using an input property

Você pode definir o modelo de expansão/recolhimento personalizado e fornecê-lo a cada um dos grupos de colunas recolhíveis usando a propriedade de entrada collapsibleIndicatorTemplate. Confira a marcação abaixo:

<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

Outra maneira de obter esse comportamento é usar a diretiva igxCollapsibleIndicator, conforme mostrado no exemplo abaixo:

<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

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.