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

A Grade de Árvore Ignite UI for Angular é usada para exibir e manipular dados hierárquicos ou de autorreferência plana. Vincule rapidamente seus dados com pouquíssimo código ou use uma variedade de eventos para personalizar diferentes comportamentos. Esse componente oferece um conjunto rico de recursos como seleção de dados, filtragem estilo Excel, ordenação, paginação, agrupamento, modelagem, movimentação de colunas, fixação de colunas, exportação para Excel, CSV e PDF, entre outros.

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 ordenação, fixação e ocultação, seleção de linhas, exportação para Excel, csv e pdf, e templação de células 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 issoIgxTreeGridModule no seu arquivo app.module.ts.

// app.module.ts

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

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

Alternativamente,16.0.0 você pode importarIgxTreeGridComponent como uma dependência independente ou usar oIGX_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/grids/tree-grid';
// 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ê importou o módulo ou diretivas Ignite UI for Angular Tree Grid, pode começar a usar oigx-tree-grid componente.

Using the Angular Tree Grid

Note

Este componente pode utilizar opcionalmenteHammerModule. ​ Ele pode ser importado no módulo raiz da aplicação para que as interações por toque funcionem como esperado.​

CompartilhaIgxTreeGridComponent muitas funcionalidades com eleIgxGridComponent, mas também adiciona a capacidade de exibir seus dados hierarquicamente. Para alcançar isso, eleIgxTreeGridComponent nos 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/colapso e um elemento de div de indentação, que é baseado no nível da linha da célula. O nível de um componente de linha pode ser acessado pelalevel propriedade de seu interiortreeRow.

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 expande todos os níveis dos nós e os mostra. Esse comportamento pode ser configurado usando aexpansionDepth propriedade. Por padrão, seu valor é Infinito, o que significa que todos os níveis dos nós serão expandidos. Você pode controlar a profundidade inicial de expansão definindo essa propriedade como um valor numérico. Por exemplo, 0 mostrará apenas nós na raiz da raiz, 1 mostrará nós na raiz e seus nós filhos e assim por diante.

Child Collection

Quando usamos a opção de coleta filha, todo objeto de dados contém uma coleção filha, que é preenchida com itens do mesmo tipo do objeto de dados pai. Assim, cada registro na nossa grade de árvore terá uma referência direta a qualquer um de seus filhos. Nesse caso, adata propriedade da 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 coleta de dados e vinculando-a àdata entrada da nossa grade de árvore.

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

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

Para que o IgxTreeGridComponent construa a hierarquia, teremos que definir suachildDataKey propriedade para o nome da coleção filha usada em cada um dos nossos objetos de dados. No nosso caso, essa será a coleção dos Funcionários. Além disso, vamos desativar a geração automática de colunas e defini-las manualmente, comparando-as às propriedades reais dos nossos objetos de dados. (A coleção Funcionários será usada automaticamente para a hierarquia, então 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 vamos ativar as funcionalidades de seleção de linhas e paginação da grade da árvore usando asrowSelection propriedades epaging. Também ativaremos o recurso de resumos na primeira coluna e os recursos de filtragem, ordenaçã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, vamos ativar a barra de ferramentas da nossa grade de árvore, junto com os recursos de ocultação de colunas, fixação de colunas e exportação, usando respectivamente oIgxGridToolbarComponent,IgxGridToolbarHidingComponent​IgxGridToolbarPinningComponent eIgxGridToolbarExporterComponent​

<!--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 usamos a opção de chave primária e estrangeira, cada objeto de dados contém uma chave primária e uma chave estrangeira. A chave primária é o identificador único do objeto de dados atual e a chave estrangeira é o identificador único de seu pai. Nesse caso, adata propriedade da nossa grade de árvore que contém a fonte de dados original será uma coleção plana.

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 aprimaryKey​foreignKey grade da á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, ativaremos o recurso de seleção de linhas da grade da árvore usando arowSelection propriedade e também os recursos de filtragem, ordenaçã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 avisibleIndex de 0) é sempre a coluna da árvore.
• A coluna que termina com avisibleIndex de 0 após operações como pinar colunas, ocultar colunas e mover colunas torna-se a coluna á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 Tree Grid permite estilização através doIgnite UI for Angular Theme Library. A gradegrid-theme de árvore expõe uma grande 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 oindex arquivo, onde todas as funções de tema e mixins de componentes estão ativos:

@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 egrid-theme aceita os parâmetros necessários para personalizar a grade de árvore conforme desejado.

Note

Não existe uma função específicasass de grade em á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 alcançar maior flexibilidade em termos de cores usando aspalette funções e.color Por favor, consulte oPalettes tópico para 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 pelo tema global selecionado deChange Theme.

Performance (Experimental)

OigxTreeGrid design permite que ele aproveite o recurso de Unificação de Eventos que Angular introduzido. Esse recurso permite melhorar o desempenho com aproximadamente em20% termos de interações e resposta. Esse recurso pode ser ativado no nível da aplicação simplesmente definindo asngZoneEventCoalescing propriedades engZoneRunCoalescing notrue​bootstrapModule método:

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

Note

Isso ainda está em um recurso experimental para oigxTreeGrid. Isso significa que pode haver alguns comportamentos inesperados na Grade de Árvore. Caso encontre esse tipo de comportamento, por favor, entre em contato conosco em nossa página no Github.

Note

Ativar isso pode afetar outras partes de uma Angular aplicação às quais nãoigxTreeGrid 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

igxTreeGridusaigxForOf diretiva internamente, portanto todasigxForOf as limitações são válidas paraigxTreeGrid. Para mais detalhes, veja a seção igxForOf Problemas Conhecidos.

API References

• Componente IgxTreeGrid
• IgxGridCell
• IgxTreeGridRow
• Componente IgxGridIgx
• Estilos IgxGridComponent
• Serviço de Transação Base Igx

Theming Dependencies

• Tema IgxIcon
• Tema IgxInputGroup
• Tema IgxChip
• Tema IgxRipple
• Tema IgxButton
• Tema IgxOverlay
• Tema IgxDropDown
• Tema IgxCalendar
• Tema IgxSnackBar
• Tema IgxBadge

Additional Resources

• Dimensionamento de grade
• Grade de dados
• Edição de linha

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

• Ignite UI for Angular Fóruns
• Ignite UI for Angular GitHub