Descripción general del componente de cuadrícula de árbol Angular

La Ignite UI for Angular Tree Grid se utiliza para mostrar y manipular datos jerárquicos o planos autorreferenciales. 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 estilo Excel, ordenación, paginación, agrupación, plantillado, movimiento de columnas, fijación de columnas, exportación a Excel, CSV y PDF, y más.

Angular Ejemplo de cuadrícula de árbol

En este ejemplo, puedes ver cómo los usuarios pueden mostrar datos jerárquicos. Hemos incluido opciones de filtrado y ordenación, fijar y ocultar, selección de filas, exportar a Excel, csv y pdf, y templar de celdas que utiliza nuestro componente Sparkline. Además, puedes ver un ejemplo de paginación personalizada con Angular Paginación.

Empezando con Ignite UI for Angular Tree Grid

Para comenzar con el componente Ignite UI for Angular Tree 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 al Ignite UI for Angular, lea el tema de introducción.

El siguiente paso es importarlosIgxTreeGridModule en tu archivo app.module.ts.

// app.module.ts

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

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

Alternativamente,16.0.0 puedes importarlosIgxTreeGridComponent como una dependencia independiente, o usar elIGX_TREE_GRID_DIRECTIVES token para importar el componente y todos sus componentes y directivas de soporte.

// home.component.ts

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

@Component({
    selector: 'app-home',
    template: '<igx-tree-grid [data]="data"></igx-tree-grid>',
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_TREE_GRID_DIRECTIVES]
    /* or imports: [IgxTreeGridComponent] */
})
export class HomeComponent {
    public data: Employee [];
}

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

Uso de la cuadrícula de árbol Angular

Nota

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

ComparteIgxTreeGridComponent muchas características con elIgxGridComponent, pero también añade la capacidad de mostrar sus datos jerárquicamente. Para lograr esto,IgxTreeGridComponent nos ofrece un par de formas de definir las relaciones entre nuestros objetos de datos: utilizando una colección hija para cada objeto de datos o usando claves primarias y externas para cada objeto de datos.

Células de árbol

Independientemente de qué opción se utilice para construir la jerarquía de la cuadrícula de árbol (colección secundaria o claves primarias y externas), las filas de la cuadrícula de árbol se construyen con dos tipos de celdas:

• IgxGridCell- Celda ordinaria que contiene un valor.
• IgxGridCell- Celda de árbol que contiene un valor, un indicador de expansión/colapso y un elemento div de hendidura, que se basa en el nivel de la fila de la celda. El nivel de un componente de fila puede accederse mediante lalevel propiedad de su interiortreeRow.

Nota

Cada fila puede tener solo una celda de árbol, pero puede tener múltiples (o ninguna) celdas ordinarias.

Profundidad inicial de expansión

Inicialmente, la cuadrícula del árbol expandirá todos los niveles de los nodos y los mostrará. Este comportamiento puede configurarse usando laexpansionDepth propiedad. Por defecto, su valor es Infinito, lo que significa que todos los niveles de nodo se expandirán. Puedes controlar la profundidad inicial de expansión estableciendo esta propiedad a un valor numérico. Por ejemplo, 0 mostrará solo nodos a nivel raíz, 1 mostrará nodos a nivel raíz y sus nodos hijos, y así sucesivamente.

Colección infantil

Cuando usamos la opción de recogida hija, cada objeto de datos contiene una colección hija, que se llena de elementos del mismo tipo que el objeto de datos padre. De este modo, cada registro en nuestra cuadrícula de árbol tendrá una referencia directa a cualquiera de sus hijos. En este caso, ladata propiedad de nuestra cuadrícula de árbol que contiene la fuente de datos original será una colección definida jerárquicamente.

Para este ejemplo, usemos la siguiente estructura de colección:

// Sample Employee Data

export const EMPLOYEE_DATA = [
    {
        Name: "Johnathan Winchester",
        ID: 1,
        HireDate: new Date(2008, 3, 20),
        Age: 55,
        Employees: [
            {
                Name: "Michael Burke",
                ID: 3,
                HireDate: new Date(2011, 6, 3),
                Age: 43,
                Employees: []
            },
            {
                Name: "Thomas Anderson"
                ID: 2,
                HireDate: new Date(2009, 6, 19),
                Age: 29,
                Employees: []
            },
            ...
        ]
    },
    ...
]

Ahora empecemos importando nuestra recopilación de datos y vinculándola a ladata entrada de nuestra cuadrícula de árbol.

<!--treeGridSample.component.html-->

<igx-tree-grid #treeGrid [data]="localData">
</igx-tree-grid>

Para que IgxTreeGridComponent construya la jerarquía, tendremos que establecer suchildDataKey propiedad al nombre de la colección hija que se usa en cada uno de nuestros objetos de datos. En nuestro caso, esa será la colección de empleados. Además, desactivaremos la generación automática de columnas y las definiremos manualmente comparándolas con las propiedades reales de nuestros objetos de datos. (La colección Empleados se usará automáticamente para la jerarquía, por lo que no es necesario incluirla en las definiciones de las columnas.)

<!--treeGridSample.component.html-->

<igx-tree-grid #treeGrid [data]="localData" childDataKey="Employees"
               [autoGenerate]="false">
    <igx-column field="Name" dataType="string"></igx-column>
    <igx-column field="HireDate" dataType="date"></igx-column>
    <igx-column field="Age" dataType="number"></igx-column>
</igx-tree-grid>

Ahora activaremos las funciones de selección de filas y paginación de la cuadrícula del árbol usando lasrowSelection propiedades ypaging. También activaremos la función de resúmenes en la primera columna y las funciones de filtrado, ordenación, edición, movimiento y redimensionamiento para cada una de nuestras columnas.

<!--treeGridSample.component.html-->

<igx-tree-grid #treeGrid [data]="localData" childDataKey="Employees"
               [autoGenerate]="false" [rowSelection]="'multiple'" [allowFiltering]="true" [moving]="true">
    <igx-column field="Name" dataType="string" [sortable]="true" [editable]="true" [resizable]="true"
                [hasSummary]="true"></igx-column>
    <igx-column field="HireDate" dataType="date" [sortable]="true" [editable]="true" [resizable]="true"></igx-column>
    <igx-column field="Age" dataType="number" [sortable]="true" [editable]="true" [resizable]="true"></igx-column>
    <igx-paginator>
    </igx-paginator>
</igx-tree-grid>

Finalmente, activaremos la barra de herramientas de nuestra cuadrícula de árbol, junto con las funciones de ocultar columnas, fijar columnas y exportar usando respectivamente elIgxGridToolbarComponent,IgxGridToolbarHidingComponent​IgxGridToolbarPinningComponent yIgxGridToolbarExporterComponent respectivamente.

<!--treeGridSample.component.html-->

<igx-tree-grid #treeGrid [data]="localData" childDataKey="Employees"
               [autoGenerate]="false" [rowSelection]="'multiple'" [allowFiltering]="true" [moving]="true">
    <igx-grid-toolbar>
            <igx-grid-toolbar-title>Employees</igx-grid-toolbar-title>
            <igx-grid-toolbar-actions>
                <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
                <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
                <igx-grid-toolbar-exporter></igx-grid-toolbar-exporter>
            </igx-grid-toolbar-actions>
    </igx-grid-toolbar>
    <igx-column field="Name" dataType="string" [sortable]="true" [editable]="true" [resizable]="true"></igx-column>
    <igx-column field="HireDate" dataType="date" [sortable]="true" [editable]="true" [resizable]="true"></igx-column>
    <igx-column field="Age" dataType="number" [sortable]="true" [editable]="true" [resizable]="true"></igx-column>
    <igx-paginator [perPage]="6">
    </igx-paginator>
</igx-tree-grid>

Puedes ver el resultado del código anterior al comienzo de este artículo en la sección Ejemplo de cuadrícula de árbol Angular.

Claves primarias y extranjeras

Cuando usamos la opción de claves primaria y externa, cada objeto de datos contiene una clave primaria y una clave externa. La clave primaria es el identificador único del objeto de datos actual y la clave externa es el identificador único de su padre. En este caso, ladata propiedad de nuestra cuadrícula de árbol que contiene la fuente de datos original será una colección plana.

El siguiente es un ejemplo de un componente que contiene una colección plana definida con una relación de claves primarias y externas:

// treeGridSample.component.ts

@Component({...})
export class MyComponent implements OnInit {

    public data: any[];

    constructor() { }

    public ngOnInit() {
        // Primary and Foreign keys sample data
        this.data = [
            { ID: 1, ParentID: -1, Name: "Casey Houston", JobTitle: "Vice President", Age: 32 },
            { ID: 2, ParentID: 1, Name: "Gilberto Todd", JobTitle: "Director", Age: 41 },
            { ID: 3, ParentID: 2, Name: "Tanya Bennett", JobTitle: "Director", Age: 29 },
            { ID: 4, ParentID: 2, Name: "Jack Simon", JobTitle: "Software Developer", Age: 33 },
            { ID: 5, ParentID: 8, Name: "Celia Martinez", JobTitle: "Senior Software Developer", Age: 44 },
            { ID: 6, ParentID: -1, Name: "Erma Walsh", JobTitle: "CEO", Age: 52 },
            { ID: 7, ParentID: 2, Name: "Debra Morton", JobTitle: "Associate Software Developer", Age: 35 },
            { ID: 8, ParentID: 10, Name: "Erika Wells", JobTitle: "Software Development Team Lead", Age: 50 },
            { ID: 9, ParentID: 8, Name: "Leslie Hansen", JobTitle: "Associate Software Developer", Age: 28 },
            { ID: 10, ParentID: -1, Name: "Eduardo Ramirez", JobTitle: "Development Manager", Age: 53 }
        ];
    }
}

En los datos de ejemplo anteriores, todos los registros tienen un ID, un ParentID y algunas propiedades adicionales como Nombre, Título del trabajo y Edad. Como se mencionó anteriormente, el ID de los registros debe ser único. ParentID contiene el ID del nodo principal. Si una fila tiene un ParentID que no coincide con ninguna fila en la cuadrícula de árbol, eso significa que esta fila es una fila raíz.

La relación padre-hijo se configura usando las propiedades y cuadrículasprimaryKey​foreignKey del árbol.

Aquí está la plantilla del componente que demuestra cómo configurar la cuadrícula de árbol para mostrar los datos definidos en la colección plana anterior:

<!--treeGridSample.component.html-->

<igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID"
    [autoGenerate]="false">
    <igx-column field="Name" dataType="string"></igx-column>
    <igx-column field="JobTitle" dataType="string"></igx-column>
    <igx-column field="Age" dataType="number"></igx-column>
</igx-tree-grid>

Además, activaremos la función de selección de filas de la cuadrícula del árbol usando larowSelection propiedad y también las funciones de filtrado, ordenación, edición, movimiento y redimensionamiento para cada una de nuestras columnas.

<!--treeGridSample.component.html-->

<igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID"
    [autoGenerate]="false" [rowSelection]="'multiple'" [allowFiltering]="true" [moving]="true">
    <igx-column field="Name" dataType="string" [sortable]="true" [editable]="true" [resizable]="true"></igx-column>
    <igx-column field="JobTitle" dataType="string" [sortable]="true" [editable]="true" [resizable]="true"></igx-column>
    <igx-column field="Age" dataType="number" [sortable]="true" [editable]="true" [resizable]="true"></igx-column>
</igx-tree-grid>

Y aquí está el resultado final:

Persistencia e integración

La sangría de las celdas del árbol persiste en otras funciones de la cuadrícula del árbol, como el filtrado, la clasificación y la paginación.

• Cuando se aplica la clasificación en una columna, las filas de datos se ordenan por niveles. Esto significa que las filas del nivel raíz se ordenarán independientemente de sus respectivos hijos. Sus respectivas colecciones infantiles también se clasificarán de forma independiente y así sucesivamente.
• La primera columna (la que tiene avisibleIndex de 0) es siempre la columna del árbol.
• La columna que termina con unvisibleIndex a de 0 tras operaciones como pinar columnas, ocultar columnas y mover columnas se convierte en la columna del árbol.
• Las hojas de cálculo de Excel exportadas reflejan la jerarquía agrupando los registros tal como están agrupados en la propia cuadrícula de árbol. Todos los estados expandidos de los registros también se conservarán y reflejarán.
• Al exportar a CSV, los niveles y los estados expandidos se ignoran y todos los datos se exportan como planos.

Angular Dimensionamiento de la cuadrícula de árbol

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

Estilismo

La Tree Grid permite estilizar a través de laIgnite UI for Angular Theme Library. La cuadrículagrid-theme de árbol expone una amplia variedad de propiedades, lo que permite personalizar todas las características de la cuadrícula de árbol.

Para empezar a estilizar la Tree Grid, necesitamos importar elindex archivo, donde están todas las funciones del tema y los componentes mixin:

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

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

Siguiendo el enfoque más sencillo, creamos un nuevo tema que extiende ygrid-theme acepta los parámetros necesarios para personalizar la cuadrícula del árbol según se desee.

Nota

No existe una función específicasass de cuadrícula en el árbol.

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

Nota

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.

El último paso es incluir el tema del componente en nuestra aplicación.

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

Angular Demo de estilo de cuadrícula en árbol

Nota

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

Rendimiento (Experimental)

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

Nota

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

Nota

Activarlo puede afectar a otras partes de una Angular aplicación con las que noigxTreeGrid está relacionado.

Limitaciones conocidas

Limitación	Descripción
Plantillas de celdas de árbol	Al crear una plantilla de celda de árbol, el contenido que se extiende fuera de los límites de la celda no se mostrará a menos que se coloque en una superposición.
Agrupar por	La función Agrupar por no es compatible porque es inherente a la cuadrícula de árbol.

Nota

La arboleda tiene un límite de profundidad de 25 niveles. Para admitir más niveles es necesario agregar clases CSS personalizadas en la aplicación. Puede ver un ejemplo de dicha clase CSS a continuación:

.igx-grid__tree-cell--padding-level-26 {
    padding-left: 39rem;
}

Nota

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

Referencias de API

• Componente IgxTreeGrid
• IgxGridCell
• IgxÁrbolCuadrículaFila
• Componente IgxGrid
• Estilos de componentes IgxGrid
• Servicio de transacciones IgxBase

Dependencias temáticas

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

Recursos adicionales

• Tamaño de cuadrícula
• Cuadrícula de datos
• Edición de filas

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

• Ignite UI for Angular Foros
• Ignite UI for Angular GitHub