Visão geral do componente Grade de árvore do Angular

    A Grade de Árvore Ignite UI for Angular é usada para exibir e manipular dados de auto-referência hierárquica ou plana. Vincule rapidamente seus dados com muito pouco código ou use uma variedade de eventos para personalizar diferentes comportamentos. Este componente fornece um rico conjunto de recursos, como seleção de dados, filtragem de estilo do Excel, classificação, paginação, agrupamento, modelagem, movimentação de coluna, fixação de coluna, exportação para Excel e CSV e muito mais.

    Angular Tree Grid Example

    Neste exemplo, você pode ver como os usuários podem exibir dados hierárquicos. Incluímos opções de filtragem e classificação, fixação e ocultação, seleção de linhas, exportação para excel e csv e modelagem de célula que usa nosso componente Sparkline. Além disso, você pode ver um exemplo de paginação personalizada com Angular Paginação.

    Getting Started with Ignite UI for Angular Tree Grid

    Para começar a usar o componente Ignite UI for Angular Tree Grid, primeiro você precisa instalar Ignite UI for Angular. Em um aplicativo Angular existente, digite 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.

    O próximo passo é importar o IgxTreeGridModule em seu arquivo app.module.ts.

    // app.module.ts

import { IgxTreeGridModule } from 'igniteui-angular';
// import { IgxTreeGridModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    imports: [
        ...
        IgxTreeGridModule,
        ...
    ]
})
export class AppModule {}

    Como alternativa, a partir de 16.0.0 você pode importar o IgxTreeGridComponent como uma dependência autônoma ou usar o IGX_TREE_GRID_DIRECTIVES token para importar o componente e todos os seus componentes e diretivas de suporte.

    // home.component.ts

import { IGX_TREE_GRID_DIRECTIVES } from 'igniteui-angular';
// import { IGX_TREE_GRID_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: '<igx-tree-grid [data]="data"></igx-tree-grid>',
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_TREE_GRID_DIRECTIVES]
    /* or imports: [IgxTreeGridComponent] */
})
export class HomeComponent {
    public data: Employee [];
}

    Agora que você tem o módulo ou as diretivas Ignite UI for Angular Tree Grid importados, pode começar a usar o igx-tree-grid componente.

    Using the Angular Tree Grid

    Note

    Este componente pode utilizar o HammerModule opcionalmente. Ele pode ser importado no módulo raiz do aplicativo para que as interações de toque funcionem conforme o esperado.​

    O IgxTreeGridComponent compartilha muitos recursos com o IgxGridComponent, mas também adiciona a capacidade de exibir seus dados hierarquicamente. Para conseguir isso, o nos IgxTreeGridComponent fornece algumas maneiras de definir as relações entre nossos objetos de dados - usando uma coleção filha para cada objeto de dados ou usando chaves primárias e estrangeiras para cada objeto de dados.

    Tree Cells

    Independentemente de qual opção é usada para criar a hierarquia da grade de árvore (coleção filho ou chaves primárias e estrangeiras), as linhas da grade de árvore são construídas de dois tipos de células:

    • IgxGridCell- Célula comum que contém um valor.
    • IgxGridCell- Célula de árvore que contém um valor, um indicador de expansão/recolhimento e um elemento div de recuo, que é baseado no nível da linha da célula. O nível de um componente de linha pode ser acessado por meio da level propriedade de seu interno treeRow.
    Note

    Cada linha pode ter apenas uma célula de árvore, mas pode ter várias (ou nenhuma) células comuns.

    Initial Expansion Depth

    Inicialmente, a grade de árvore expandirá todos os níveis de nó e os mostrará. Esse comportamento pode ser configurado usando a expansionDepth propriedade. Por padrão, seu valor é Infinito, o que significa que todos os níveis de nó serão expandidos. Você pode controlar a profundidade de expansão inicial definindo essa propriedade como um valor numérico. Por exemplo, 0 mostrará apenas nós de nível raiz,1 mostrará nós de nível raiz e seus nós filhos e assim por diante.

    Child Collection

    Quando estamos usando a opção de coleção filho, cada objeto de dados contém uma coleção filho, que é preenchida com itens do mesmo tipo que o objeto de dados pai. Dessa forma, cada registro em nossa grade de árvore terá uma referência direta a qualquer um de seus filhos. Nesse caso, a data propriedade de nossa grade de árvore que contém a fonte de dados original será uma coleção definida hierarquicamente.

    Para este exemplo, vamos usar a seguinte estrutura de coleção:

    // Sample Employee Data

export const EMPLOYEE_DATA = [
    {
        Name: "Johnathan Winchester",
        ID: 1,
        HireDate: new Date(2008, 3, 20),
        Age: 55,
        Employees: [
            {
                Name: "Michael Burke",
                ID: 3,
                HireDate: new Date(2011, 6, 3),
                Age: 43,
                Employees: []
            },
            {
                Name: "Thomas Anderson"
                ID: 2,
                HireDate: new Date(2009, 6, 19),
                Age: 29,
                Employees: []
            },
            ...
        ]
    },
    ...
]

    Agora vamos começar importando nossa coleção de dados e vinculando-a data à entrada de nossa grade de árvore.

    <!--treeGridSample.component.html-->

<igx-tree-grid #treeGrid [data]="localData">
</igx-tree-grid>

    Para que o IgxTreeGridComponent crie a hierarquia, teremos que definir sua childDataKey propriedade como o nome da coleção filho usada em cada um de nossos objetos de dados. No nosso caso, essa será a coleção Employees. Além disso, desativaremos a geração automática de colunas e as definiremos manualmente, combinando-as com as propriedades reais de nossos objetos de dados. (A coleção Employees será usada automaticamente para a hierarquia, portanto, não há necessidade de incluí-la nas definições das colunas.)

    <!--treeGridSample.component.html-->

<igx-tree-grid #treeGrid [data]="localData" childDataKey="Employees"
               [autoGenerate]="false">
    <igx-column field="Name" dataType="string"></igx-column>
    <igx-column field="HireDate" dataType="date"></igx-column>
    <igx-column field="Age" dataType="number"></igx-column>
</igx-tree-grid>

    Agora habilitaremos os recursos de seleção de linha e paginação da grade de árvore usando as rowSelection propriedades e . paging Também ativaremos o recurso de resumos na primeira coluna e os recursos de filtragem, classificação, edição, movimentação e redimensionamento para cada uma de nossas colunas.

    <!--treeGridSample.component.html-->

<igx-tree-grid #treeGrid [data]="localData" childDataKey="Employees"
               [autoGenerate]="false" [rowSelection]="'multiple'" [allowFiltering]="true" [moving]="true">
    <igx-column field="Name" dataType="string" [sortable]="true" [editable]="true" [resizable]="true"
                [hasSummary]="true"></igx-column>
    <igx-column field="HireDate" dataType="date" [sortable]="true" [editable]="true" [resizable]="true"></igx-column>
    <igx-column field="Age" dataType="number" [sortable]="true" [editable]="true" [resizable]="true"></igx-column>
    <igx-paginator>
    </igx-paginator>
</igx-tree-grid>

    Por fim, habilitaremos a barra de ferramentas de nossa grade de árvore, juntamente com os recursos de ocultação de coluna, fixação de coluna e exportação usando o IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent e IgxGridToolbarExporterComponent respectivamente.

    <!--treeGridSample.component.html-->

<igx-tree-grid #treeGrid [data]="localData" childDataKey="Employees"
               [autoGenerate]="false" [rowSelection]="'multiple'" [allowFiltering]="true" [moving]="true">
    <igx-grid-toolbar>
            <igx-grid-toolbar-title>Employees</igx-grid-toolbar-title>
            <igx-grid-toolbar-actions>
                <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
                <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
                <igx-grid-toolbar-exporter></igx-grid-toolbar-exporter>
            </igx-grid-toolbar-actions>
    </igx-grid-toolbar>
    <igx-column field="Name" dataType="string" [sortable]="true" [editable]="true" [resizable]="true"></igx-column>
    <igx-column field="HireDate" dataType="date" [sortable]="true" [editable]="true" [resizable]="true"></igx-column>
    <igx-column field="Age" dataType="number" [sortable]="true" [editable]="true" [resizable]="true"></igx-column>
    <igx-paginator [perPage]="6">
    </igx-paginator>
</igx-tree-grid>

    Você pode ver o resultado do código acima no início deste artigo na seção Exemplo de grade de árvore Angular.

    Primary and Foreign keys

    Quando estamos usando a opção de chaves primárias e estrangeiras, cada objeto de dados contém uma chave primária e uma chave estrangeira. A chave primária é o identificador exclusivo do objeto de dados atual e a chave estrangeira é o identificador exclusivo de seu pai. Nesse caso, a data propriedade de nossa grade de árvore que contém a fonte de dados original será uma coleção simples.

    Veja a seguir um exemplo de um componente que contém uma coleção simples definida com relação de chaves primárias e estrangeiras:

    // treeGridSample.component.ts

@Component({...})
export class MyComponent implements OnInit {

    public data: any[];

    constructor() { }

    public ngOnInit() {
        // Primary and Foreign keys sample data
        this.data = [
            { ID: 1, ParentID: -1, Name: "Casey Houston", JobTitle: "Vice President", Age: 32 },
            { ID: 2, ParentID: 1, Name: "Gilberto Todd", JobTitle: "Director", Age: 41 },
            { ID: 3, ParentID: 2, Name: "Tanya Bennett", JobTitle: "Director", Age: 29 },
            { ID: 4, ParentID: 2, Name: "Jack Simon", JobTitle: "Software Developer", Age: 33 },
            { ID: 5, ParentID: 8, Name: "Celia Martinez", JobTitle: "Senior Software Developer", Age: 44 },
            { ID: 6, ParentID: -1, Name: "Erma Walsh", JobTitle: "CEO", Age: 52 },
            { ID: 7, ParentID: 2, Name: "Debra Morton", JobTitle: "Associate Software Developer", Age: 35 },
            { ID: 8, ParentID: 10, Name: "Erika Wells", JobTitle: "Software Development Team Lead", Age: 50 },
            { ID: 9, ParentID: 8, Name: "Leslie Hansen", JobTitle: "Associate Software Developer", Age: 28 },
            { ID: 10, ParentID: -1, Name: "Eduardo Ramirez", JobTitle: "Development Manager", Age: 53 }
        ];
    }
}

    Nos dados de exemplo acima, todos os registros têm um ID, um ParentID e algumas propriedades adicionais, como Name, JobTitle e Age. Conforme mencionado anteriormente, a ID dos registros deve ser exclusiva. O ParentID contém a ID do nó pai. Se uma linha tiver um ParentID que não corresponda a nenhuma linha na grade da árvore, isso significa que essa linha é uma linha raiz.

    A relação pai-filho é configurada usando as propriedades e foreignKey da primaryKey grade de árvore.

    Aqui está o modelo do componente que demonstra como configurar a grade de árvore para exibir os dados definidos na coleção plana acima:

    <!--treeGridSample.component.html-->

<igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID"
    [autoGenerate]="false">
    <igx-column field="Name" dataType="string"></igx-column>
    <igx-column field="JobTitle" dataType="string"></igx-column>
    <igx-column field="Age" dataType="number"></igx-column>
</igx-tree-grid>

    Além disso, habilitaremos o recurso de seleção de linha da grade de árvore usando a rowSelection propriedade e também os recursos de filtragem, classificação, edição, movimentação e redimensionamento para cada uma de nossas colunas.

    <!--treeGridSample.component.html-->

<igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID"
    [autoGenerate]="false" [rowSelection]="'multiple'" [allowFiltering]="true" [moving]="true">
    <igx-column field="Name" dataType="string" [sortable]="true" [editable]="true" [resizable]="true"></igx-column>
    <igx-column field="JobTitle" dataType="string" [sortable]="true" [editable]="true" [resizable]="true"></igx-column>
    <igx-column field="Age" dataType="number" [sortable]="true" [editable]="true" [resizable]="true"></igx-column>
</igx-tree-grid>

    E aqui está o resultado final:

    Persistence and Integration

    O recuo das células da árvore persiste em outros recursos da grade da árvore, como filtragem, classificação e paginação.

    • Quando a classificação é aplicada em uma coluna, as linhas de dados são classificadas por níveis. Isso significa que as linhas de nível raiz serão classificadas independentemente de seus respectivos filhos. Suas respectivas coleções filhas também serão classificadas de forma independente e assim por diante.
    • A primeira coluna (aquela que tem um visibleIndex de 0) é sempre a coluna da árvore.
    • A coluna que termina com um visibleIndex de 0 após operações como fixação de coluna, ocultação de coluna e movimentação de coluna torna-se a coluna de árvore.
    • As planilhas do Excel exportadas refletem a hierarquia agrupando os registros à medida que são agrupados na própria grade de árvore. Todos os estados expandidos de registros também seriam persistidos e refletidos.
    • Ao exportar para CSV, os níveis e estados expandidos são ignorados e todos os dados são exportados como simples.

    Angular Tree Grid Sizing

    Consulte o tópico Dimensionamento de grade.

    Estilização

    A Grade da Árvore permite estilizar através do Ignite UI for Angular Theme Library. A grade de grid-theme árvore expõe uma ampla variedade de propriedades, o que permite a personalização de todos os recursos da grade de árvore.

    Para começar a estilizar a Grade de Árvore, precisamos importar o index arquivo, onde todas as funções do tema e mixins de componentes residem:

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

    Seguindo a abordagem mais simples, criamos um novo tema que estende e grid-theme aceita os parâmetros, necessários para personalizar a grade da árvore conforme desejado.

    Note

    Não há uma função específica sass de grade de árvore.

    $custom-theme: grid-theme(
  $cell-active-border-color: #ffcd0f,
  $cell-selected-background: #6f6f6f,
  $row-hover-background: #f8e495,
  $row-selected-background: #8d8d8d,
  $header-background: #494949,
  $header-text-color: #fff,
  $expand-icon-color: #ffcd0f,
  $expand-icon-hover-color: #e0b710,
  $resize-line-color: #ffcd0f,
  $row-highlight: #ffcd0f
);
    Note

    Em vez de codificar os valores de cor como acabamos de fazer, podemos obter maior flexibilidade em termos de cores usando as palette funções e color. Consulte o Palettes tópico para obter orientações detalhadas sobre como usá-los.

    O último passo é incluir o tema do componente em nosso aplicativo.

    @include css-vars($custom-theme);

    Angular Tree Grid Styling Demo

    Note

    A amostra não será afetada Change Theme pelo tema global selecionado.

    Performance (Experimental)

    O design do permite igxTreeGrid que ele aproveite o recurso Event Coalescing que Angular introduzido. Esse recurso permite um desempenho aprimorado em termos de 20% interações e capacidade de resposta. Esse recurso pode ser habilitado no nível do aplicativo simplesmente definindo as ngZoneEventCoalescing propriedades and ngZoneRunCoalescing como true no bootstrapModule método:

    platformBrowserDynamic()
  .bootstrapModule(AppModule, { ngZoneEventCoalescing: true, ngZoneRunCoalescing: true })
  .catch(err => console.error(err));
    Note

    Isso ainda está em recurso experimental para o igxTreeGrid. Isso significa que pode haver alguns comportamentos inesperados na Grade de Árvore. Em caso de encontrar tal comportamento, entre em contato conosco em nossa página do Github.

    Note

    Ativá-lo pode afetar outras partes de um aplicativo Angular ao qual o igxTreeGrid não está relacionado.

    Known Limitations

    Limitação Descrição
    Modelando células de árvore Ao modelar uma célula de árvore, o conteúdo que se estende fora dos limites da célula não será mostrado, a menos que seja posicionado em uma sobreposição.
    Agrupar por O recurso Agrupar por não é suportado, pois é inerente à grade de árvore.
    Note

    A grade da árvore tem um limite de profundidade de 25 níveis. O suporte a mais níveis requer a adição de classes CSS personalizadas no aplicativo. Você pode ver um exemplo dessa classe CSS abaixo:

    .igx-grid__tree-cell--padding-level-26 {
    padding-left: 39rem;
}
    Note

    igxTreeGrid usa igxForOf diretiva internamente, portanto, todas as igxForOf limitações são válidas para igxTreeGrid. Para obter mais detalhes, consulte a seção igxForOf Problemas conhecidos.

    API References

    Theming Dependencies

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.