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

    La cuadrícula de datos jerárquicos Ignite UI for Angular se utiliza para mostrar y manipular datos tabulares jerárquicos. Vincule rápidamente sus datos con muy poco código o use una variedad de eventos para personalizar diferentes comportamientos. Este componente proporciona un amplio conjunto de funciones como selección de datos, filtrado de estilo de Excel, ordenación, paginación, 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.

    Ejemplo de cuadrícula de datos jerárquica Angular

    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.

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Introducción a Ignite UI for Angular cuadrícula de datos jerárquica

    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 empezar a utilizar el componente de cuadrícula de datos jerárquicos de Ignite UI for Angular, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:

    ng add igniteui-angular
cmd

    Para obtener una introducción completa al 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 {}
typescript

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

    Ahora que ha importado el módulo o las directivas Ignite UI for Angular Hierarchyarchical Grid, puede empezar a utilizar el igx-hierarchical-grid componente.

    Uso de la cuadrícula de datos jerárquica Angular

    El enlace de datos

    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:

    Usando datos jerárquicos

    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"
        }]
    }]
}];
javascript

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

    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.

    Uso de carga bajo demanda

    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>
html
    //  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();
            }
        );
    }
}
typescript
    // 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}`;
    }
}
typescript

    Ocultar/Mostrar indicadores de expansión de fila

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

    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.

    App Builder | CTA Banner

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

    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.

    Botón Contraer Todo

    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.

    operaciones CRUD

    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.

    Estilo

    igxHierarchicalGrid permite aplicar estilo a través de la Ignite UI for Angular Theme Library. La cuadrícula grid-theme expone una amplia variedad de propiedades, que permiten la personalización de todas las características de la cuadrícula.

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

    Importando tema global

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

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

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

    Definición de tema personalizado

    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.

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

    En lugar de codificar los valores de color como acabamos de hacer, podemos lograr una mayor flexibilidad en términos de colores mediante el uso de las palette funciones y color. Consulte el Palettes tema para obtener orientación detallada sobre cómo usarlos.

    Aplicar el tema personalizado

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

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

    Para que el tema personalizado afecte solo a un componente específico, puede mover todos los estilos que acaba de definir del archivo de estilos globales al archivo de estilo del componente personalizado (incluida la index importación del archivo). De ViewEncapsulation esta manera, debido a Angular, sus estilos se aplicarán solo a su componente personalizado.

    Manifestación

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

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

    Rendimiento (experimental)

    Su igxHierarchicalGrid diseño le permite aprovechar la función de fusión de eventos que Angular ha introducido. Esta característica permite mejorar el rendimiento en 20% términos de interacciones y capacidad de respuesta. Esta característica se puede habilitar en el nivel de la aplicación simplemente estableciendo las ngZoneEventCoalescing propiedades y ngZoneRunCoalescing en true el bootstrapModule método:

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

    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.

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

    Limitaciones conocidas

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

    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.

    Referencias de API

    Dependencias temáticas

    Recursos adicionales

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