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 de autorreferencia planos o 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, agrupación, creación de plantillas, movimiento de columnas, fijación de columnas, exportación a Excel y CSV, y más.

    Angular Tree Grid Example

    En este ejemplo, puede ver cómo los usuarios pueden mostrar datos jerárquicos. Hemos incluido opciones de filtrado y clasificación, fijación y ocultación, selección de filas, exportación a Excel y CSV, y plantillas de celdas que utilizan nuestro componente Sparkline. Además, puedes ver un ejemplo de paginación personalizada con Angular Pagination.

    Getting Started with 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 a la Ignite UI for Angular, lea el tema de introducción.

    El siguiente paso es importar IgxTreeGridModule en su archivo app.module.ts.

    // app.module.ts

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

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

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

    // home.component.ts

import { IGX_TREE_GRID_DIRECTIVES } from 'igniteui-angular';
// 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 ha importado la Ignite UI for Angular Tree Grid, puede comenzar a usar el componente igx-tree-grid.

    Using the Angular Tree 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.​

    ​IgxTreeGridComponent comparte muchas características con IgxGridComponent, pero también agrega la capacidad de mostrar sus datos jerárquicamente. Para lograr esto, IgxTreeGridComponent nos proporciona un par de formas de definir las relaciones entre nuestros objetos de datos: usando una colección secundaria para cada objeto de datos o usando claves primarias y externas para cada objeto de datos.

    Tree Cells

    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/contraer y un elemento div de sangría, que se basa en el nivel de la fila de la celda. Se puede acceder al nivel de un componente de fila a través de la propiedad de level de su treeRow interno.
    Note

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

    Initial Expansion Depth

    Inicialmente, la cuadrícula de árbol expandirá todos los niveles de nodos y los mostrará. Este comportamiento se puede configurar utilizando la propiedad expansionDepth. De forma predeterminada, su valor es Infinito, lo que significa que se expandirán todos los niveles de nodos. Puede controlar la profundidad de expansión inicial estableciendo esta propiedad en un valor numérico. Por ejemplo, 0 mostrará solo los nodos de nivel raíz, 1 mostrará los nodos de nivel raíz y sus nodos secundarios, etc.

    Child Collection

    Cuando utilizamos la opción de colección secundaria, cada objeto de datos contiene una colección secundaria, que se completa con elementos del mismo tipo que el objeto de datos principal. De esta forma, cada registro de nuestra grilla de árbol tendrá una referencia directa a cualquiera de sus hijos. En este caso, la propiedad data 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 comencemos importando nuestra colección de datos y vinculándola a la entrada data 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 su propiedad childDataKey en el nombre de la colección secundaria que se utiliza 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 haciéndolas coincidir 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 habilitaremos las funciones de selección de filas y paginación de la cuadrícula de árbol utilizando las propiedades rowSelection y de paging. También habilitaremos la función de resúmenes en la primera columna y las funciones de filtrado, clasificación, edición, movimiento y cambio de tamaño 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, habilitaremos la barra de herramientas de nuestra cuadrícula de árbol, junto con las funciones de ocultación de columnas, fijación de columnas y exportación utilizando IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent e IgxGridToolbarExporterComponent 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>

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

    Primary and Foreign keys

    Cuando utilizamos la opción de claves primarias y externas, cada objeto de datos contiene una clave primaria y una clave externa. La clave principal es el identificador único del objeto de datos actual y la clave externa es el identificador único de su objeto principal. En este caso, la propiedad data 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 utilizando las propiedades primaryKey y foreignKey de la cuadrícula de á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, habilitaremos la función de selección de filas de la cuadrícula de árbol utilizando la propiedad rowSelection y también las funciones de filtrado, clasificación, edición, movimiento y cambio de tamaño 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:

    Persistence and Integration

    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 un visibleIndex de 0) es siempre la columna del árbol.
    • La columna que termina con un visibleIndex de 0 después de operaciones como fijar, ocultar 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 Tree Grid Sizing

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

    Angular Tree Grid Styling

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

    Para comenzar a diseñar el Tree Grid, necesitamos importar el archivo index, donde se encuentran todas las funciones del tema y los mixins de componentes:

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

    Siguiendo el enfoque más simple, creamos un nuevo tema que extiende el grid-theme y acepta los parámetros necesarios para personalizar la cuadrícula de árbol como se desee.

    Note

    No existe una función específica de cuadrícula de árbol 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
);

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

    @include grid($custom-theme);
    Note

    Si el componente utiliza una ViewEncapsulation Emulated, es necesario penetrate esta encapsulación usando::ng-deep:

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

    Defining a Color Palette

    En lugar de codificar los valores de color como acabamos de hacer, podemos lograr una mayor flexibilidad en términos de colores utilizando las funciones igx-palette e igx-color.

    igx-palette genera una paleta de colores basada en los colores primarios y secundarios que se pasan:

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

    Y luego con igx-color podemos recuperar fácilmente el color de la paleta.

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

    Using Schemas

    Yendo más allá con el motor de temas, puede crear una estructura sólida y flexible que se beneficie de los esquemas. Un esquema es una receta de un tema.

    Amplíe uno de los dos esquemas predefinidos, que se proporcionan para cada componente, en este caso, el esquema light-grid:

    // Extending the light tree grid schema
$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 aplicar nuestros esquemas personalizados, tenemos que extender uno de los globales (light u dark), que básicamente señala los componentes con un esquema personalizado, y luego agregarlo a los respectivos temas de los componentes:

    // Extending the global light-schema
$my-custom-schema: extend($light-schema, (
    igx-grid: $custom-grid-schema
));

// Defining grid-theme with the global light schema
$custom-theme: grid-theme(
    $palette: $custom-palette,
    $schema: $my-custom-schema
);

    No olvide incluir los temas de la misma manera que se demostró anteriormente.

    Angular Tree Grid Styling Demo

    Note

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

    Performance (Experimental)

    El diseño de igxTreeGrid 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

    Esta todavía es una característica experimental para igxTreeGrid. Esto significa que puede haber algunos comportamientos inesperados en Tree Grid. 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 igxTreeGrid no está relacionado.

    Known Limitations

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

    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;
}
    Note

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

    API References

    Theming Dependencies

    Additional Resources

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