Descripción general y configuración de la cuadrícula de árbol de Web Components

La cuadrícula de árbol Web Components es un componente de interfaz de usuario que combina la funcionalidad de una cuadrícula de datos (tabla) con una vista de árbol, lo que permite que los datos jerárquicos se muestren fácilmente en un formato tabular. A diferencia de una cuadrícula normal, una cuadrícula de árbol permite que las filas se expandan y contraigan, revelando filas secundarias anidadas debajo de filas principales, lo que la hace útil para representar datos estructurados como exploradores de archivos, organigramas, tareas de proyectos o categorías de productos.

La cuadrícula de árbol Ignite UI for Web Components se utiliza para visualizar y manipular datos jerárquicos o planos con facilidad. 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 estilo Excel, ordenación, paginación, creación de plantillas y movimiento de columnas. La visualización de datos tabulares nunca ha sido tan fácil y atractiva gracias a la cuadrícula de árbol de la interfaz de usuario basada en Material Table.

Web Components Tree Grid Example

En este ejemplo, puede ver cómo los usuarios pueden manipular datos jerárquicos o planos. Hemos incluido opciones de filtrado y clasificación, fijación y ocultación, selección de filas, exportación a Excel y CSV.

Example

Getting Started with Ignite UI for Web Components Tree Grid

Dependencies

Comenzar con nuestra biblioteca Web Components Grid y Web Components Tree Grid en particular es el primer paso para crear aplicaciones potentes y ricas en datos que muestren información jerárquica de una manera clara e interactiva. La cuadrícula de árbol Web Components le permite presentar estructuras de datos primarios y secundarios en un formato tabular familiar, completo con características como expansión de filas, ordenación, filtrado, edición y virtualización para un alto rendimiento con conjuntos de datos grandes.

Para empezar con la red de árboles de Web Components, primero necesitas instalar eligniteui-webcomponents-grids paquete.

npm install --save igniteui-webcomponents-grids

También debe incluir la siguiente importación para utilizar la cuadrícula de árbol:

import 'igniteui-webcomponents-grids/grids/combined';

También se debe hacer referencia a los estilos correspondientes. Puede elegir la opción clara u oscura para uno de los temas y, según la configuración de su proyecto, importarlo:

import 'igniteui-webcomponents-grids/grids/themes/light/bootstrap.css';

O para vincularlo:

<link rel='stylesheet' href='node_modules/igniteui-webcomponents-grids/grids/themes/light/bootstrap.css'>

Para obtener más detalles sobre cómo personalizar la apariencia de la cuadrícula de árbol, puede consultar la sección de estilo.

Usage

La cuadrícula de árbol comparte muchas características con la cuadrícula, pero también agrega la capacidad de mostrar sus datos jerárquicamente. Para lograr esto, la cuadrícula de árbol 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:

• GridCell- Celda ordinaria que contiene un valor.
• TreeGridCell- 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.

[!Note] Each row can have only one tree cell, but it can have multiple (or none) ordinary cells.

Initial Expansion Depth

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.

Child Collection

Cuando usamos la opción de colección secundaria, cada objeto de datos contiene una colección secundaria, que se rellena con elementos del mismo tipo que el objeto de datos principal. De esta manera, cada registro en la cuadrícula de árbol tendrá una referencia directa a cualquiera de sus hijos. En este caso, la propiedad de datos 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:

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 nuestradata colección y enlazándola a nuestra cuadrícula de árboles.

<igc-tree-grid auto-generate="false" id="treeGrid" name="treeGrid">
    <igc-column field="name" header="Name" data-type="string"></igc-column>
    <igc-column field="hireDate" header="Hire Date" data-type="date"></igc-column>
    <igc-column field="age" header="Age" data-type="number"></igc-column>
</igc-tree-grid>

    constructor() {
        var treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
        treeGrid.childDataKey = "Employees";
        treeGrid.data = this.employeesNestedData;
    }

Para que la cuadrícula de árbol 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, podemos desactivar la generación automática de columnas y definirlas 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.)

Ahora podemos habilitar las funciones de selección de filas y paginación de la cuadrícula del árbol usando elrowSelection y añadiendo elIgcPaginatorComponent elemento. También podemos activar las funciones de resúmenes, filtrado, ordenación, edición, movimiento y redimensionamiento para cada una de nuestras columnas.

<igc-tree-grid auto-generate="false" id="treeGrid" child-data-key="Employees" row-selection="multiple" allow-filtering="true" moving="true">
    <igc-column field="name" header="Name" data-type="string" sortable="true" resizable="true" has-summary="true" editable="true"></igc-column>
    <igc-column field="hireDate" header="Hire Date" data-type="date" sortable="true" resizable="true" has-summary="true" editable="true"></igc-column>
    <igc-column field="age" header="Age" data-type="number" sortable="true" resizable="true" has-summary="true" editable="true"></igc-column>
    <igc-paginator></igc-paginator>
</igc-tree-grid>

Por último, podemos activar la barra de herramientas de nuestra cuadrícula de árbol, junto con las funciones de ocultar columnas, fijar columnas y exportar, usando respectivamente elIgcGridToolbarComponent,IgcGridToolbarHidingComponent​IgcGridToolbarPinningComponent yIgcGridToolbarExporterComponent​

<igc-tree-grid auto-generate="false" id="treeGrid" name="treeGrid" child-data-key="Employees" row-selection="multiple" allow-filtering="true" moving="true">
    <igc-column field="name" header="Name" data-type="string" sortable="true" resizable="true" has-summary="true" editable="true"></igc-column>
    <igc-column field="hireDate" header="Hire Date" data-type="date" sortable="true" resizable="true" editable="true"></igc-column>
    <igc-column field="age" header="Age" data-type="number" sortable="true" resizable="true" editable="true"></igc-column>
    <igc-paginator></igc-paginator>
    <igc-grid-toolbar>
        <igc-grid-toolbar-title> Employees </igc-grid-toolbar-title>
        <igc-grid-toolbar-actions>
            <igc-grid-toolbar-hiding> </igc-grid-toolbar-hiding>
            <igc-grid-toolbar-pinning> </igc-grid-toolbar-pinning>
            <igc-grid-toolbar-exporter export-csv="true" export-excel="true"> </igc-grid-toolbar-exporter>
        </igc-grid-toolbar-actions>
    </igc-grid-toolbar>
</igc-tree-grid>

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

Primary and Foreign keys

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.

const 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, Puesto de Trabajo y Antigüedad. Como se mencionó antes, el ID de los registros debe ser único, ya que será nuestroprimaryKey. El ParentID contiene el ID del nodo padre y podría establecerse como unforeignKey. Si una fila tiene un ParentID que no coincide con ninguna fila de la cuadrícula del árbol, entonces significa que esa 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:

 <igc-tree-grid auto-generate="false" name="treeGrid" id="treeGrid" primary-key="ID" foreign-key="ParentID" allow-filtering="true" moving="true" row-selection="multiple">
    <igc-column field="Name" data-type="string"></igc-column>
    <igc-column field="JobTitle" header="Job Title"></igc-column>
    <igc-column field="Age" data-type="number"></igc-column>
</igc-tree-grid>

Además, habilitaremos la función de selección de filas de la cuadrícula de árbol mediante el uso de la propiedad rowSelection y también las funciones de filtrado, ordenación, edición, movimiento y cambio de tamaño para cada una de nuestras columnas.

 <igc-tree-grid auto-generate="false" name="treeGrid" id="treeGrid" primary-key="ID" foreign-key="ParentID" allow-filtering="true" moving="true" row-selection="multiple">
    <igc-column field="Name" data-type="string" sortable="true" editable="true" resizable="true"> </igc-column>
    <igc-column field="JobTitle" header="Job Title" data-type="string" sortable="true" editable="true" resizable="true"> </igc-column>
    <igc-column field="Age" data-type="number" sortable="true" editable="true" resizable="true"> </igc-column>
</igc-tree-grid>

Y aquí está el resultado final:

Persistence and Integration

La sangría de la celda de la cuadrícula de árbol persiste en otras entidades de cuadrícula de árbol, como el filtrado, la ordenación y la paginación.

• CuandoSorting se aplica en una columna, las filas de datos se ordenan por niveles. Esto significa que las filas a nivel raíz se ordenarán de forma independiente de sus respectivos hijos. Sus respectivas colecciones infantiles también se ordenará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.

Web Components Tree Grid Styling Configuration

Además de los temas predefinidos, la cuadrícula se puede personalizar aún más configurando algunas de las propiedades CSS disponibles. En caso de que desee cambiar algunos de los colores, primero debe establecer una clase para la cuadrícula:

<igc-tree-grid class="tree-grid">

Luego configure las propiedades CSS relacionadas para esa clase:

.tree-grid {
    --ig-grid-header-background: #494949;
    --ig-grid-header-text-color: #FFF;
    --ig-grid-expand-icon-color: #FFCD0F;
    --ig-grid-expand-icon-hover-color: #E0B710;
    --ig-grid-row-hover-background: #F8E495;
}

API References

• IgcTreeGridComponent
• IgcColumnComponent
• IgcGridToolbarComponent
• IgcTreeGridRecord

Additional Resources

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

• Ignite UI for Web Components Foros
• Ignite UI for Web Components GitHub