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

La Ignite UI for Angular Hierarchical Data Grid se utiliza para mostrar y manipular datos tabulares jerárquicos. Vincula rápidamente tus datos con muy poco código o utiliza una variedad de eventos para personalizar diferentes comportamientos. Este componente ofrece un conjunto completo de funciones como selección de datos, filtrado al estilo Excel, ordenación, paginación, plantillas, movimiento de columnas, fijación de columnas, exportación a Excel, CSV y PDF, y más. La Cuadrícula Jerárquica se basa en el componente de la Cuadrícula Plana y amplía su funcionalidad permitiendo a los usuarios expandir o colapsar las filas de la cuadrícula principal, revelando las correspondientes cuadrículas hijas cuando se necesite 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 elHammerModule opcional. Puede importarse 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

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

El siguiente paso es importarlosIgxHierarchicalGridModule en tu archivo 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 puedes importarlosIgxHierarchicalGridComponent como una dependencia independiente, o usar elIGX_HIERARCHICAL_GRID_DIRECTIVES token para importar el componente y todos sus componentes y directivas de soporte.

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

Ahora que tienes importado el módulo o directivas de Ignite UI for Angular Hierarchical Grid, puedes empezar a usar eligx-hierarchical-grid componente.

Using the Angular Hierarchical Data Grid

El enlace de datos

igx-hierarchical-gridderiva deigx-grid y comparte la mayor parte de su funcionalidad. La principal diferencia es que permite definir múltiples niveles de jerarquía. Se configuran mediante una etiqueta separada dentro de la definición deigx-hierarchical-grid llamadoigx-row-island. Eligx-row-island componente define la configuración para cada cuadrícula hija del nivel particular. También se admiten múltiples islas de fila por nivel. La Red Jerárquica soporta dos formas de vinculación a 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 unoigx-row-island debe especificar la clave de la propiedad que contiene los datos hijos.

<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

Ten en cuenta que en lugar dedata que el usuario configure solo lokey que necesitaigx-hierarchical-grid leer para establecer los datos automáticamente.

Using Load-On-Demand

La mayoría de las aplicaciones están diseñadas para cargar la menor cantidad posible de datos inicialmente, lo que resulta en tiempos de carga más rápidos. En tales casosigx-hierarchical-grid puede configurarse para permitir que los servicios creados por el usuario le suministren datos bajo demanda. La siguiente configuración utiliza una plantilla especial@Output y una de nueva introducción en proceso de carga para ofrecer una carga bajo demanda completa.

<!-- 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 tienes una forma de proporcionar información sobre si una fila tiene hijos antes de expandirse, podrías usar la propiedad dehasChildrenKey entrada. De este modo, podrías proporcionar una propiedad booleana desde los objetos de datos que indique si debe mostrarse un indicador de expansión.

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

Ten en cuenta que no es necesario establecer lahasChildrenKey propiedad. En caso de que no lo proporciones, 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 podrían activarse y configurarse mediante eligx-row-island marcado: 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 fila 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 conjuntoigx-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 respecto a la cuadrícula de datos plana es que cada instancia para una isla de fila dada tiene la misma instancia de servicio de transacciones y acumula el mismo registro de transacciones. Para habilitar la funcionalidad CRUD, los usuarios deben inyectar elIgxHierarchicalTransactionServiceFactory.

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

La igxHierarchicalGrid permite el estilizado a través de laIgnite UI for Angular Theme Library. La cuadrículagrid-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.

Importing global theme

Para comenzar la personalización de la cuadrícula jerárquica, necesitas importar elindex archivo, donde se encuentran todas las funciones de estilo y mixin.

@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

A continuación, crea un nuevo tema que extienda ygrid-theme acepte los parámetros necesarios para personalizar la cuadrícula jerárquica según se desee.

Note

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

$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

En lugar de codificar los valores de color como acabamos de hacer, podemos lograr mayor flexibilidad en cuanto a colores usando laspalette funciones ycolor. Por favor, consulta elPalettes tema para obtener una guía detallada sobre cómo utilizarlos.

Applying the custom theme

La forma más sencilla de aplicar tu tema es con unasass @include instrucción en el archivo de estilos globales:

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

Para que el tema personalizado solo afecte a un componente específico, puedes mover todos los estilos que acabas de definir del archivo de estilos globales al archivo de estilo del componente personalizado (incluyendo la importación delindex archivo). De este modo, debido a AngularViewEncapsulation, tus estilos se aplicarán solo a tu componente personalizado.

Demo

Note

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

Performance (Experimental)

EligxHierarchicalGrid diseño permite aprovechar la función de Fusión de Eventos que Angular ha introducido. Esta función permite mejorar el rendimiento aproximadamente20% en términos de interacciones y capacidad de respuesta. Esta función puede activarse a nivel de aplicación simplemente estableciendo lasngZoneEventCoalescing propiedades yngZoneRunCoalescing entrue elbootstrapModule método:

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

Note

Esto sigue siendo una característica experimental para eligxHierarchicalGrid. Esto significa que puede haber algunos comportamientos inesperados en la Red Jerárquica. En caso de que te encuentres con algún comportamiento similar, por favor contáctanos en nuestra página de Github.

Note

Activarlo puede afectar a otras partes de una Angular aplicación con las que noigxHierarchicalGrid 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

igxHierarchicalGridusaigxForOf directiva interna, por lo que todasigxForOf las limitaciones son válidas paraigxHierarchicalGrid. Para más detalles, véase la sección de Problemas Conocidos de igxForOf.

API References

Theming Dependencies

Additional Resources

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

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

Angular Hierarchical Data Grid Example

Getting Started with Ignite UI for Angular Hierarchical Data Grid

Note

Using the Angular Hierarchical Data Grid

El enlace de datos

Using hierarchical data

Note

Using Load-On-Demand

Hide/Show row expand indicators

Características

Collapse All Button

Dimensionamiento

CRUD operations

Note

Estilismo

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

Tematización