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

A Grade de Dados Hierárquica Ignite UI for Angular é usada para exibir e manipular dados tabulares hierárquicos. 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, modelagem, movimentação de colunas, fixação de colunas, exportação para Excel e CSV e muito mais. A Grade hierárquica baseia-se no componente de grade plana e estende sua funcionalidade, permitindo que os usuários expandam ou recolham as linhas da grade pai, revelando as grades filhas correspondentes, quando informações mais detalhadas são 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 o HammerModule opcionalmente. Ele pode ser importado no módulo raiz do aplicativo para que as interações de toque funcionem conforme o 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 o IgxHierarchicalGridModule em seu arquivo app.module.ts.

// app.module.ts

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

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

Como alternativa, a partir de 16.0.0 você pode importar o IgxHierarchicalGridComponent como uma dependência autônoma ou usar o IGX_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';
// 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ê tem o módulo ou as diretivas Ignite UI for Angular Hierarchical Grid importados, pode começar a usar o igx-hierarchical-grid componente.

Using the Angular Hierarchical Data Grid

Data Binding

igx-hierarchical-grid deriva e igx-grid compartilha a maior parte de sua funcionalidade. A principal diferença é que ele permite que vários níveis de hierarquia sejam definidos. Eles são configurados por meio de uma tag separada dentro da definição de igx-hierarchical-grid, chamado igx-row-island. O igx-row-island componente define a configuração de cada grade filho para o nível específico. Várias ilhas de linha por nível também são suportadas. A Grade Hierárquica oferece suporte a duas maneiras de associaçã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 um igx-row-island deve especificar a chave da propriedade que contém os dados 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

Observe que, em vez de data o usuário configurar apenas o key que precisa igx-hierarchical-grid ler para definir os dados automaticamente.

Using Load-On-Demand

A maioria dos aplicativos é projetada para carregar o mínimo de dados possível inicialmente, o que resulta em tempos de carregamento mais rápidos. Nesses casos igx-hierarchical-grid, pode ser configurado para permitir que os serviços criados pelo usuário o alimentem com dados sob demanda. A configuração a seguir usa um modelo de carregamento em andamento especial @Output e 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ê tiver uma maneira de fornecer informações se uma linha tem filhos antes de sua expansão, poderá usar a hasChildrenKey propriedade input. Dessa forma, você pode fornecer uma propriedade booleana 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>

Observe que a configuração da hasChildrenKey propriedade não é necessária. Caso você não o forneça, os 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 de grade podem ser habilitados e configurados por meio da igx-row-island marcação - eles são aplicados a cada grade criada para ela. Alterar as opções em tempo de execução por meio da instância da ilha de linha as altera para cada uma das grades geradas.

<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 igx-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 da Grade de Dados simples é que cada instância de uma determinada 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 o IgxHierarchicalTransactionServiceFactory.

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 estilizar por meio do Ignite UI for Angular Theme Library. A grade grid-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 iniciar a personalização da grade hierárquica, você precisa importar o index arquivo, onde todas as funções de estilo e mixins estão localizados.

@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 e grid-theme aceite os parâmetros, necessários para personalizar a grade hierárquica conforme desejado.

Note

Não há função de grade hierárquica específica sass.

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

Applying the custom theme

A maneira mais fácil de aplicar seu tema é com uma sass @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 index importação do arquivo). Dessa forma, devido a Angular ViewEncapsulation, seus estilos serão aplicados apenas ao seu componente personalizado.

Demo

Note

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

Performance (Experimental)

O design do permite igxHierarchicalGrid 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 igxHierarchicalGrid. Isso significa que pode haver alguns comportamentos inesperados na Grade Hierárquica. 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 igxHierarchicalGrid não está relacionado.

Known Limitations

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

Note

igxHierarchicalGrid usa igxForOf diretiva internamente, portanto, todas as igxForOf limitações são válidas para igxHierarchicalGrid. 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.

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

Angular Hierarchical Data Grid Example

Getting Started with Ignite UI for Angular Hierarchical Data Grid

Note

Using the Angular Hierarchical Data Grid

Data Binding

Using hierarchical data

Note

Using Load-On-Demand

Hide/Show row expand indicators

Características

Collapse All Button

Dimensionamento

CRUD operations

Note

Estilização

Importing global theme

Defining custom theme

Note

Note

Applying the custom theme

Demo

Note

Performance (Experimental)

Note

Note

Known Limitations

Note

API References

Theming Dependencies

Additional Resources

Temas