Visão geral do componente Grade de Dados Hierárquica do Angular

A Ignite UI for Angular Hierarchical Data Grid é usada para exibir e manipular dados tabulares hierárquicos. 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, plantilamento, movimentação de colunas, fixação de colunas, exportação para Excel, CSV e PDF, entre outros. A Grade Hierárquica se baseia no Componente Grade Plana e amplia sua funcionalidade permitindo que os usuários expandam ou colapsem as linhas da grade pai, revelando grades filhas correspondentes, quando informações mais detalhadas forem necessárias.

Angular Hierarchical Data Grid Example

Neste exemplo de grade angular, você pode ver como os usuários podem visualizar conjuntos hierárquicos de dados e usar modelos de célula para adicionar outros componentes visuais, como o Minigráfico.

Getting Started with Ignite UI for Angular Hierarchical Data 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.​

Para começar a usar o componente Ignite UI for Angular Grade de Dados Hierárquica, 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 issoIgxHierarchicalGridModule no seu arquivo app.module.ts.

// app.module.ts

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

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

Alternativamente,16.0.0 você pode importarIgxHierarchicalGridComponent como uma dependência independente ou usar oIGX_HIERARCHICAL_GRID_DIRECTIVES token para importar o componente e todos os seus componentes e diretivas de suporte.

// home.component.ts

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

@Component({
    selector: 'app-home',
    template: `
    <igx-hierarchical-grid #hierarchicalGrid [data]="singers" [autoGenerate]="true">
        <igx-row-island [key]="'Albums'" [autoGenerate]="true">
            <igx-row-island [key]="'Songs'" [autoGenerate]="true">
            </igx-row-island>
        </igx-row-island>
        <igx-row-island [key]="'Tours'" [autoGenerate]="true">
        </igx-row-island>
    </igx-hierarchical-grid>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_HIERARCHICAL_GRID_DIRECTIVES]
    /* or imports: [IgxHierarchicalGridComponent, IgxRowIslandComponent] */
})
export class HomeComponent {
    public singers: Artist [];
}

Agora que você importou o módulo ou diretivas Ignite UI for Angular Hierarchical Grid, pode começar a usar oigx-hierarchical-grid componente.

Using the Angular Hierarchical Data Grid

Vinculação de dados

igx-hierarchical-gridderiva eigx-grid compartilha a maior parte de sua funcionalidade. A principal diferença é que permite a definição de múltiplos níveis de hierarquia. Eles são configurados por meio de uma tag separada dentro da definição deigx-hierarchical-grid chamadoigx-row-island. Oigx-row-island componente define a configuração para cada grade filho para o nível específico. Múltiplas ilhas de fileira por nível também são suportadas. A Grade Hierárquica suporta duas formas de vinculação aos dados:

Using hierarchical data

Se o aplicativo carregar todos os dados hierárquicos como uma matriz de objetos que fazem referência a matrizes filhas de objetos, a Grade Hierárquica poderá ser configurada para lê-los e vinculá-los automaticamente. Aqui está um exemplo de uma fonte de dados hierárquica estruturada corretamente:

export const singers = [{
    "Artist": "Naomí Yepes",
    "Photo": "assets/images/hgrid/naomi.png",
    "Debut": "2011",
    "Grammy Nominations": 6,
    "Grammy Awards": 0,
    "Tours": [{
        "Tour": "Faithful Tour",
        "Started on": "Sep-12",
        "Location": "Worldwide",
        "Headliner": "NO",
        "Toured by": "Naomí Yepes"
    }],
    "Albums": [{
        "Album": "Dream Driven",
        "Launch Date": new Date("August 25, 2014"),
        "Billboard Review": "81",
        "US Billboard 200": "1",
        "Artist": "Naomí Yepes",
        "Songs": [{
            "No.": "1",
            "Title": "Intro",
            "Released": "*",
            "Genre": "*",
            "Album": "Dream Driven"
        }]
    }]
}];

Cada umigx-row-island deve especificar a chave da propriedade que contém os dados dos filhos.

<igx-hierarchical-grid #hierarchicalGrid [data]="singers" [autoGenerate]="true">
    <igx-row-island [key]="'Albums'" [autoGenerate]="true">
        <igx-row-island [key]="'Songs'" [autoGenerate]="true">
        </igx-row-island>
    </igx-row-island>
    <igx-row-island [key]="'Tours'" [autoGenerate]="true">
    </igx-row-island>
</igx-hierarchical-grid>

Note

Note que, em vez dedata o usuário configurar apenas okey que oigx-hierarchical-grid necessário ler para definir os dados automaticamente.

Using Load-On-Demand

A maioria dos aplicativos é projetada para carregar o mínimo possível de dados inicialmente, o que resulta em tempos de carregamento mais rápidos. Nesses casosigx-hierarchical-grid, pode ser configurado para permitir que serviços criados pelo usuário o alimentem com dados sob demanda. A configuração a seguir utiliza um modelo especial@Output e um modelo de carregamento em andamento recém-introduzido para fornecer um carregamento sob demanda completo.

<!-- hierarchicalGridSample.component.html -->

<igx-hierarchical-grid #hGrid [primaryKey]="'CustomerID'" [autoGenerate]="true" [height]="'600px'" [width]="'100%'">
    <igx-row-island [key]="'Orders'" [primaryKey]="'OrderID'" [autoGenerate]="true"  (gridCreated)="gridCreated($event, 'CustomerID')">
        <igx-row-island [key]="'Order_Details'" [primaryKey]="'ProductID'" [autoGenerate]="true" (gridCreated)="gridCreated($event, 'OrderID')">
        </igx-row-island>
    </igx-row-island>
</igx-hierarchical-grid>

//  hierarchicalGridSample.component.ts

@Component({...})
export class HierarchicalGridLoDSampleComponent implements AfterViewInit {
    @ViewChild("hGrid")
    public hGrid: IgxHierarchicalGridComponent;

    constructor(private remoteService: RemoteLoDService) { }

    public ngAfterViewInit() {
        this.hGrid.isLoading = true;
        this.remoteService.getData({ parentID: null, rootLevel: true, key: "Customers" }).subscribe((data) => {
            this.hGrid.isLoading = false;
            this.hGrid.data = data;
            this.hGrid.cdr.detectChanges();
        });
    }

    public gridCreated(event: IGridCreatedEventArgs, _parentKey: string) {
        const dataState = {
            key: event.owner.key,
            parentID: event.parentID,
            parentKey: _parentKey,
            rootLevel: false
        };
        event.grid.isLoading = true;
        this.remoteService.getData(dataState).subscribe(
            (data) => {
                event.grid.isLoading = false;
                event.grid.data = data;
                event.grid.cdr.detectChanges();
            }
        );
    }
}

// remote-load-on-demand.service.ts

@Injectable()
export class RemoteLoDService {
    public url = `https://services.odata.org/V4/Northwind/Northwind.svc/`;

    constructor(private http: HttpClient) { }

    public getData(dataState?: any): Observable<any[]> {
        return this.http.get(this.buildUrl(dataState)).pipe(
            map((response) => response["value"])
        );
    }

    public buildUrl(dataState) {
        let qS = "";
        if (dataState) {
            qS += `${dataState.key}?`;

            if (!dataState.rootLevel) {
                if (typeof dataState.parentID === "string") {
                    qS += `$filter=${dataState.parentKey} eq '${dataState.parentID}'`;
                } else {
                    qS += `$filter=${dataState.parentKey} eq ${dataState.parentID}`;
                }
            }
        }
        return `${this.url}${qS}`;
    }
}

Hide/Show row expand indicators

Se você tem uma forma de fornecer informações sobre se uma linha tem filhos antes de expandir, pode usar ahasChildrenKey propriedade de entrada. Dessa forma, você poderia fornecer uma propriedade booleana a partir dos objetos de dados que indica se um indicador de expansão deve ser exibido.

<igx-hierarchical-grid #grid [data]="data" primaryKey="ID" hasChildrenKey="hasChildren">
        ...
</igx-hierarchical-grid>

Note que não é necessário definir ahasChildrenKey propriedade. Caso você não forneça, indicadores de expansão serão exibidos para cada linha.

Além disso, se você deseja mostrar/ocultar o indicador de expandir/recolher tudo do cabeçalho, pode usar a propriedade showExpandAll. Essa interface do usuário é desabilitada por padrão por motivos de desempenho e não é recomendável habilitá-la em grades com dados grandes ou grades com carga sob demanda.

Características

Os recursos da grade poderiam ser ativados e configurados por meio daigx-row-island marcação – eles são aplicados para cada grade criada para eles. Mudar as opções em tempo de execução através da instância da ilha de linha as altera para cada uma das grades que ela gerou.

<igx-hierarchical-grid [data]="localData" [autoGenerate]="false"
    [allowFiltering]='true' [height]="'600px'" [width]="'800px'" #hGrid>
    <igx-column field="ID" [pinned]="true" [filterable]='true'></igx-column>
    <igx-column-group header="Information">
        <igx-column field="ChildLevels"></igx-column>
        <igx-column field="ProductName" hasSummary='true'></igx-column>
    </igx-column-group>
    <igx-row-island [key]="'childData'" [autoGenerate]="false" [rowSelection]="'multiple'" #layout1>
        <igx-column field="ID" [hasSummary]='true' [dataType]="'number'"></igx-column>
        <igx-column-group header="Information2">
            <igx-column field="ChildLevels"></igx-column>
            <igx-column field="ProductName"></igx-column>
        </igx-column-group>
        <igx-paginator *igxPaginator [perPage]="5"></igx-paginator>
    </igx-row-island>
    <igx-paginator>
    </igx-paginator>
</igx-hierarchical-grid>

Os seguintes recursos de grade funcionam em um nível por grade, o que significa que cada instância de grade os gerencia independentemente do restante das grades:

• Classificação
• Filtragem
• Paginação
• Cabeçalhos de várias colunas
• Escondendo
• Fixação
• Movente
• Resumos
• Procurar

Os recursos de Seleção e Navegação funcionam globalmente para todo o conjuntoigx-hierarchical-grid

• Seleção A seleção não permite que as células selecionadas estejam presentes para duas grades filho diferentes ao mesmo tempo.
• Navegação Ao navegar para cima/para baixo, se o elemento next/prev for uma grade filho, a navegação continuará na grade filho relacionada, marcando a célula relacionada como selecionada e focada. Se a célula filho estiver fora da porta de exibição visível atual, ela será rolada para a exibição para que a célula selecionada esteja sempre visível.

Collapse All Button

A grade hierárquica permite que os usuários recolham convenientemente todas as suas linhas atualmente expandidas pressionando o botão "Recolher tudo" no canto superior esquerdo. Além disso, cada grade filha que contém outras grades e é uma grade hierárquica em si, também possui esse botão - dessa forma, o usuário pode recolher apenas uma determinada grade na hierarquia:

Dimensionamento

Consulte o tópico Dimensionamento de grade.

CRUD operations

Note

Uma diferença importante em relação à grade de dados plana é que cada instância para uma dada ilha de linha tem a mesma instância de serviço de transação e acumula o mesmo log de transações. Para habilitar a funcionalidade CRUD, os usuários devem injetar oIgxHierarchicalTransactionServiceFactory.

A chamada de métodos de API CRUD ainda deve ser feita por meio de cada instância de grade separada.

Confira o tópico Como criar operações CRUD com igxGrid.

Estilização

O igxHierarchicalGrid permite estilização através doIgnite UI for Angular Theme Library. A gradegrid-theme expõe uma grande variedade de propriedades, que permitem a personalização de todos os recursos da grade.

Nas etapas abaixo, estamos passando pelas etapas de personalização do estilo igxHierarchicalGrid.

Importing global theme

Para começar a customização da grade hierárquica, você precisa importar oindex arquivo, onde todas as funções de estilo e mixins estão localizadas.

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

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

Defining custom theme

Em seguida, crie um novo tema que estenda egrid-theme aceite os parâmetros necessários para personalizar a grade hierárquica conforme desejado.

Note

Não existe uma função hierárquica específicasass de grade.

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

Applying the custom theme

A maneira mais fácil de aplicar seu tema é com umasass @include instrução no arquivo de estilos globais:

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

Para que o tema personalizado afete apenas um componente específico, você pode mover todos os estilos que acabou de definir do arquivo de estilos globais para o arquivo de estilo do componente personalizado (incluindo a importação doindex arquivo). Dessa forma, devido aos AngularViewEncapsulation, seus estilos serão aplicados apenas ao seu componente personalizado.

Demo

Note

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

Performance (Experimental)

OigxHierarchicalGrid 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 oigxHierarchicalGrid. Isso significa que pode haver alguns comportamentos inesperados na Grade Hierárquica. 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ãoigxHierarchicalGrid está relacionado.

Known Limitations

Limitação	Descrição
Agrupar por	O recurso Agrupar por não é suportado pela grade hierárquica.

Note

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

API References

• Componente IgxHierarchicalGridComponent
• Componente IgxRowIsland
• Componente IgxGridIgx
• Estilos IgxGridComponent
• IgxColumnComponent
• IgxHierarchicalGridRow
• IgxGridCell

Theming Dependencies

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

Additional Resources

• Dimensionamento de grade
• Virtualização e desempenho
• Paginação
• Filtragem
• Classificação
• Resumos
• Movimentação de Colunas
• Fixação de coluna
• Redimensionamento de colunas
• Escolha

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

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