Angular Cell Merging

A Grade de Árvore Ignite UI for Angular fornece um recurso de Mesclagem de Células que combina duas ou mais células adjacentes com o mesmo valor em uma única célula maior. A mesclagem é aplicada verticalmente em uma coluna e ajuda a melhorar a legibilidade, reduzindo valores duplicados. O recurso pode ser configurado para mesclar células por valores de dados correspondentes padrão ou aplicando uma condição personalizada.

Angular Cell Merging Example

Enabling and Using Cell Merging

A fusão de células na grade é controlada em dois níveis:

Modo de mesclagem no nível da grade – determina quando a mesclagem é aplicada.
Alternância de mesclagem no nível da coluna – determina quais colunas podem mesclar células.

Grid Merge Mode

A grade expõe uma cellMergeMode propriedade que aceita valores da GridCellMergeMode enumeração:

always- Mescla todas as células adjacentes que atendem à condição de mesclagem, independentemente do estado de classificação.
onSort - Merges adjacent cells only when the column is sorted (default value).

<igx-tree-grid [data]="data" [cellMergeMode]="cellMergeMode">
    ...
</igx-tree-grid>

protected cellMergeMode: GridCellMergeMode = 'always';

Column Merge Toggle

No nível da coluna, a mesclagem pode ser habilitada ou desabilitada com a merge propriedade.

<igx-column field="OrderID" [merge]="true"></igx-column>
<igx-column field="ShipperName" [merge]="false"></igx-column>

No exemplo acima:

The OrderID column will merge adjacent duplicate values.
A coluna ShipperName será renderizada normalmente sem mesclagem.

Combined Example

<igx-tree-grid [data]="data" [cellMergeMode]="cellMergeMode" [autoGenerate]="false">
    <igx-column field="OrderID" header="Order ID" [merge]="true"></igx-column>
    <igx-column field="ShipperName" header="Shipper Name" [merge]="true"></igx-column>
    <igx-column field="Salesperson" header="Salesperson"></igx-column>
</igx-tree-grid>

protected cellMergeMode: GridCellMergeMode = 'onSort';

Aqui, a grade é definida para mesclar somente quando as colunas são classificadas e as colunas Categoria e Produto são configuradas para mesclagem.

Custom Merge Conditions

Além dos modos e always onSort integrados, a grade permite definir uma condição personalizada para mesclar células por meio da mergeStrategy propriedade. Essa estratégia controla como as células são comparadas e como os intervalos mesclados são calculados.

Merge Strategy Interface

Uma estratégia de mesclagem personalizada deve implementar a IGridMergeStrategy interface:

export interface IGridMergeStrategy {
    merge: (
        data: any[],
        field: string,
        comparer: (prevRecord: any, currentRecord: any, field: string) => boolean,
        result: any[],
        activeRowIndex?: number,
        grid?: GridType
    ) => any[];

    comparer: (prevRecord: any, record: any, field: string) => boolean;    
}

merge- define como as células mescladas são produzidas.
comparer- define a condição para decidir se dois registros adjacentes devem ser mesclados.

O IgxTreeGrid fornece duas estratégias integradas que implementam a IGridMergeStrategy interface: DefaultTreeGridMergeStrategy e ByLevelTreeGridMergeStrategy. DefaultTreeGridMergeStrategy mescla todas as células com o mesmo valor, independentemente de seu nível hierárquico. Por outro lado, ByLevelTreeGridMergeStrategy mescla células apenas se elas tiverem o mesmo valor e estiverem localizadas no mesmo nível, tornando o nível uma condição necessária para a mesclagem.

Extending the Default Strategy

Se você quiser personalizar apenas parte do comportamento (por exemplo, a lógica do comparador), poderá estender uma das estratégias integradas, ou DefaultTreeGridMergeStrategy, ByLevelTreeGridMergeStrategy e substituir os métodos relevantes.

export class MyCustomStrategy extends DefaultTreeGridMergeStrategy {
    /* Merge only cells within their respective projects */
    public override comparer(prevRecord: any, record: any, field: string): boolean {
        const a = prevRecord[field];
        const b = record[field];
        const projA = prevRecord['ProjectName'];
        const projB = record['ProjectName'];
        return a === b && projA === projB;
    }
}

Applying a Custom Strategy

Uma vez definida, atribua a estratégia à grade por meio da mergeStrategy propriedade:

<igx-tree-grid [data]="data" [mergeStrategy]="customStrategy">
  <igx-column field="ActionID" [merge]="true"></igx-column>
  <igx-column field="ProjectName" [merge]="true"></igx-column>
</igx-tree-grid>

protected customStrategy = new MyCustomStrategy();

Feature Integration

Devido ao comportamento específico das células mescladas, deve-se notar como exatamente elas se unem a alguns dos outros recursos da grade:

Exportação do Excel: as células mescladas permanecem mescladas quando exportadas para o Excel.
Fixação de coluna: as células permanecem mescladas quando uma coluna é fixada e são exibidas na área fixada.
Fixação de linha: as células se fundem apenas dentro de sua área de contenção, ou seja, as células de linhas fixadas se fundem apenas com células de outras linhas fixadas, enquanto as células de linhas não fixadas se fundem apenas com células de linhas não fixadas.
Navegação/Ativação: quando uma célula está ativa, todas as células mescladas na mesma linha tornam-se células únicas, ou seja, sua sequência de mesclagem é quebrada. Isso também inclui a ativação por meio da navegação pelo teclado.

Note

Se uma célula mesclada for clicada, a célula mais próxima da sequência de mesclagem ficará ativa.

Atualização/Edição: como a ativação interrompe a sequência de mesclagem, apenas uma única célula estará no modo de edição.
Seleção de linha: se as linhas selecionadas cruzarem células mescladas, todas as células mescladas relacionadas devem ser marcadas como parte da seleção.

API References

Additional Resources

Visão geral da grade de árvore

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

Angular Cell Merging