Descripción general del componente de cuadrícula de datos jerárquica Angular

La Ignite UI for Angular Hierarchical Data Grid se utiliza para mostrar y manipular datos tabulares jerárquicos. Vincule rápidamente sus datos con muy poco código o utilice una variedad de eventos para personalizar diferentes comportamientos. Este componente proporciona un amplio conjunto de funciones como selección de datos, filtrado de estilos de Excel, clasificación, paginación, creación de plantillas, movimiento de columnas, fijación de columnas, exportación a Excel y CSV, y más. La cuadrícula jerárquica se basa en el componente de cuadrícula plana y amplía su funcionalidad al permitir a los usuarios expandir o contraer las filas de la cuadrícula principal, revelando las cuadrículas secundarias correspondientes, cuando se necesita información más detallada.

Angular Hierarchical Data Grid Example

En este ejemplo de cuadrícula angular, puede ver cómo los usuarios pueden visualizar conjuntos jerárquicos de datos y usar plantillas de celdas para agregar otros componentes visuales como Sparkline.

Getting Started with Ignite UI for Angular Hierarchical Data Grid

Note

Este componente puede utilizar el HammerModule opcionalmente. Se puede importar en el módulo raíz de la aplicación para que las interacciones táctiles funcionen como se espera.​

Para comenzar con el componente Ignite UI for Angular Hierarchical Data Grid, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:

ng add igniteui-angular

Para obtener una introducción completa a la Ignite UI for Angular, lea el tema de introducción.

El siguiente paso es importar IgxHierarchicalGridModule en su archivo 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 {}

Alternativamente, a partir de 16.0.0, puede importar IgxHierarchicalGridComponent como una dependencia independiente o usar el token IGX_HIERARCHICAL_GRID_DIRECTIVES para importar el componente y todos sus componentes y directivas de soporte.

// 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 [];
}

Ahora que ha importado la Ignite UI for Angular Hierarchical Grid, puede comenzar a usar el componente igx-hierarchical-grid.

Using the Angular Hierarchical Data Grid

Data Binding

igx-hierarchical-grid deriva de igx-grid y comparte la mayor parte de su funcionalidad. La principal diferencia es que permite definir múltiples niveles de jerarquía. Se configuran a través de una etiqueta separada dentro de la definición de igx-hierarchical-grid, llamada igx-row-island. El componente igx-row-island define la configuración de cada cuadrícula secundaria para el nivel particular. También se admiten varias filas de islas por nivel. La cuadrícula jerárquica admite dos formas de vincular datos:

Using hierarchical data

Si la aplicación carga todos los datos jerárquicos como una matriz de objetos que hacen referencia a matrices de objetos secundarios, entonces la cuadrícula jerárquica se puede configurar para leerlos y vincularlos automáticamente. A continuación se muestra un ejemplo de una fuente de datos jerárquica correctamente estructurada:

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 igx-row-island debe especificar la clave de la propiedad que contiene los datos secundarios.

<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

Tenga en cuenta que en lugar de data, el usuario configura solo la key que igx-hierarchical-grid necesita leer para configurar los datos automáticamente.

Using Load-On-Demand

La mayoría de las aplicaciones están diseñadas para cargar la menor cantidad de datos posible inicialmente, lo que resulta en tiempos de carga más rápidos. En tales casos igx-hierarchical-grid se puede configurar para permitir que los servicios creados por el usuario lo alimenten con datos a pedido. La siguiente configuración utiliza una @Output especial y una plantilla de carga en progreso recientemente introducida para proporcionar una carga bajo demanda con todas las funciones.

<!-- 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

Si tiene una manera de proporcionar información sobre si una fila tiene hijos antes de expandirse, puede usar la propiedad de entrada hasChildrenKey. De esta manera, podría proporcionar una propiedad booleana de los objetos de datos que indique si se debe mostrar un indicador de expansión.

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

Tenga en cuenta que no es necesario configurar la propiedad hasChildrenKey. En caso de que no lo proporcione, se mostrarán indicadores de expansión para cada fila.

Además, si desea mostrar/ocultar el indicador de expandir/contraer todo el encabezado, puede utilizar la propiedad showExpandAll. Esta UI está deshabilitada de forma predeterminada por razones de rendimiento y no se recomienda habilitarla en grids con gran cantidad de datos o grids con carga bajo demanda.

Características

Las características de la cuadrícula se pueden habilitar y configurar a través del marcado igx-row-island; se aplican para cada cuadrícula que se crea para ella. Cambiar las opciones en tiempo de ejecución a través de la instancia de la isla de filas las cambia para cada una de las cuadrículas que ha generado.

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

Las siguientes características de grid funcionan a nivel de grid, lo que significa que cada instancia de grid las administra independientemente del resto de grids:

• Clasificación
• Filtración
• Paginación
• Encabezados de varias columnas
• Ocultación
• Fijar
• Moviente
• resúmenes
• Buscar

Las funciones de Selección y Navegación funcionan globalmente para todo el igx-hierarchical-grid

• Selección La selección no permite que las celdas seleccionadas estén presentes en dos cuadrículas secundarias diferentes a la vez.
• Navegación Al navegar hacia arriba/abajo, si el elemento siguiente/anterior es una cuadrícula secundaria, la navegación continuará en la cuadrícula secundaria relacionada, marcando la celda relacionada como seleccionada y enfocada. Si la celda secundaria está fuera del puerto de visualización visible actual, se desplaza a la vista para que la celda seleccionada siempre esté visible.

Collapse All Button

La cuadrícula jerárquica permite a los usuarios contraer convenientemente todas las filas actualmente expandidas presionando el botón "Contraer todo" en la esquina superior izquierda. Además, cada cuadrícula secundaria que contiene otras cuadrículas y es una cuadrícula jerárquica en sí misma, también tiene un botón de este tipo; de esta manera, el usuario puede contraer solo una cuadrícula determinada en la jerarquía:

Dimensionamiento

Consulte el tema Tamaño de la cuadrícula.

CRUD operations

Note

Una diferencia importante con respecto al Data Grid plano es que cada instancia de una isla de fila determinada tiene la misma instancia de servicio de transacciones y acumula el mismo registro de transacciones. Para habilitar la funcionalidad CRUD, los usuarios deben inyectar IgxHierarchicalTransactionServiceFactory.

La llamada a los métodos CRUD API aún se debe realizar a través de cada instancia de grid separada.

Consulte el tema Cómo crear operaciones CRUD con igxGrid.

Estilismo

igxHierarchicalGrid permite diseñar a través de la Ignite UI for Angular. El tema de la grilla expone una amplia variedad de propiedades, que permiten la personalización de todas las características de la grilla.

En los pasos a continuación, veremos los pasos para personalizar el estilo igxHierarchicalGrid.

Importing global theme

Para comenzar a personalizar la cuadrícula jerárquica, debe importar el archivo index, donde se encuentran todas las funciones de estilo y mixins.

@import '~igniteui-angular/lib/core/styles/themes/index'

Defining custom theme

A continuación, cree un nuevo tema, que extienda el grid-theme y acepte los parámetros necesarios para personalizar la cuadrícula jerárquica como desee.

Note

No existe una función de cuadrícula jerárquica sass específica.

$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
);

Defining a custom color palette

En el enfoque descrito anteriormente, los valores de color estaban codificados. Alternativamente, puede lograr una mayor flexibilidad utilizando las funciones igx-palette e igx-color. igx-palette genera una paleta de colores basada en los colores primarios y secundarios proporcionados.

$black-color: #494949;
$yellow-color: #FFCD0F;

$custom-palette: palette(
 $primary: $black-color,
 $secondary: $yellow-color
);

Una vez generada una paleta personalizada, la función igx-color se puede utilizar para obtener diferentes variedades de colores primarios y secundarios.

$custom-theme: grid-theme(
    $cell-active-border-color: (igx-color($custom-palette, "secondary", 500)),
    $cell-selected-background: (igx-color($custom-palette, "primary", 300)),
    $row-hover-background: (igx-color($custom-palette, "secondary", 100)),
    $row-selected-background: (igx-color($custom-palette, "primary", 100)),
    $header-background: (igx-color($custom-palette, "primary", 500)),
    $header-text-color: (igx-contrast-color($custom-palette, "primary", 500)),
    $expand-icon-color: (igx-color($custom-palette, "secondary", 500)),
    $expand-icon-hover-color: (igx-color($custom-palette, "secondary", 600)),
    $resize-line-color: (igx-color($custom-palette, "secondary", 500)),
    $row-highlight: (igx-color($custom-palette, "secondary", 500))
);

Defining custom schemas

Puede ir aún más lejos y crear una estructura flexible que tenga todos los beneficios de un esquema. El esquema es la receta de un tema. Amplíe uno de los dos esquemas predefinidos que se proporcionan para cada componente. En nuestro caso, usaremos $_light_grid.

$custom-grid-schema: extend($_light-grid,(
    cell-active-border-color: (igx-color:('secondary', 500)),
    cell-selected-background: (igx-color:('primary', 300)),
    row-hover-background: (igx-color:('secondary', 100)),
    row-selected-background: (igx-color:('primary', 100)),
    header-background: (igx-color:('primary', 500)),
    header-text-color: (igx-contrast-color:('primary', 500)),
    expand-icon-color: (igx-color:('secondary', 500)),
    expand-icon-hover-color: (igx-color:('secondary', 600)),
    resize-line-color: (igx-color:('secondary', 500)),
    row-highlight: (igx-color:('secondary', 500))
));

Para que se aplique el esquema personalizado, se deben extender los globales light u dark. En realidad, todo el proceso consiste en proporcionar un componente con un esquema personalizado y luego agregarlo al tema del componente respectivo.

$my-custom-schema: extend($light-schema, (
    igx-grid: $custom-grid-schema
));

$custom-theme: grid-theme(
    $palette: $custom-palette,
    $schema: $my-custom-schema
);

Applying the custom theme

La forma más sencilla de aplicar su tema es con una declaración @include sass en el archivo de estilos global:

@include grid($custom-theme);

Scoped component theme

Para que el tema personalizado afecte solo a un componente específico, puede mover todos los estilos que acaba de definir desde el archivo de estilos globales al archivo de estilo del componente personalizado (incluida la importación del archivo index).

De esta manera, debido a ViewEncapsulation de Angular, sus estilos se aplicarán solo a su componente personalizado.

Note

Si el componente utiliza una ViewEncapsulation Emulated, es necesario penetrar esta encapsulación usando::ng-deep para poder diseñar la cuadrícula.

Note

Envuelva la declaración dentro de un selector:host para evitar que sus estilos afecten a elementos fuera de nuestro componente:

:host {
    ::ng-deep {
        @include grid($custom-theme);
    }
}

Demo

Note

La muestra no se verá afectada por el tema global seleccionado en Change Theme.

Performance (Experimental)

El diseño de igxHierarchicalGrid le permite aprovechar la función Event Coalescing que ha introducido Angular. Esta característica permite un rendimiento mejorado con aproximadamente un 20% en términos de interacciones y capacidad de respuesta. Esta característica se puede habilitar a nivel de aplicación simplemente configurando las propiedades ngZoneEventCoalescing y ngZoneRunCoalescing en true en el método bootstrapModule:

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

Note

Esto todavía se encuentra en una función experimental para igxHierarchicalGrid. Esto significa que puede haber algunos comportamientos inesperados en la cuadrícula jerárquica. En caso de encontrar algún comportamiento de este tipo, contáctenos en nuestra página de Github.

Note

Habilitarlo puede afectar otras partes de una aplicación Angular con las que igxHierarchicalGrid no está relacionado.

Known Limitations

Limitación	Descripción
Agrupar por	La función Agrupar por no es compatible con la cuadrícula jerárquica.

Note

igxHierarchicalGrid usa la directiva igxForOf internamente, por lo tanto, todas las limitaciones igxForOf son válidas para igxHierarchicalGrid. Para obtener más detalles, consulte la sección Problemas conocidos de igxForOf.

API References

• Componente IgxHierarchicalGrid
• IgxRowIslandComponente
• Componente IgxGrid
• Estilos de componentes IgxGrid
• ComponenteColumnaIgx
• IgxHierarchicalGridRow
• IgxGridCell

Theming Dependencies

• Tema IgxIcon
• Tema IgxInputGroup
• Tema IgxChip
• Tema IgxRipple
• Tema IgxButton
• Tema IgxOverlay
• Tema desplegable Igx
• Tema IgxCalendario
• Tema IgxActionStrip
• Tema IgxSnackBar
• Tema IgxBadge

Additional Resources

• Tamaño de cuadrícula
• Virtualización y rendimiento
• Paginación
• Filtración
• Clasificación
• resúmenes
• Columna en movimiento
• Fijación de columnas
• Cambio de tamaño de columna
• Selección

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.

• Ignite UI for Angular foros angulares
• Ignite UI for Angular GitHub