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

    La cuadrícula de árbol de Ignite UI for Web Components se utiliza para mostrar y manipular datos jerárquicos o planos con facilidad. 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 la selección de datos, el filtrado de estilo Excel, la ordenación, la paginación, las plantillas y el 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 la tabla de materiales.

    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

    Para comenzar con la cuadrícula de árbol de Web Components, primero debe instalar el igniteui-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/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] Each row can have only one tree cell, but it can have multiple (or none) ordinary cells.

    Initial Expansion Depth

    Inicialmente, la cuadrícula de árbol expandirá todos los niveles de nodo y los mostrará. Este comportamiento se puede configurar mediante la ExpansionDepth propiedad. De forma predeterminada, su valor es Infinity, lo que significa que se expandirán todos los niveles de nodo. 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, 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 comencemos importando nuestra colección y vinculándola a nuestra Data cuadrícula de árbol.

    <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 su ChildDataKey propiedad en el nombre de la colección secundaria que se usa en cada uno de nuestros objetos de datos. En nuestro caso será la colección Empleados. Además, podemos desactivar la generación automática de columnas y definirlas manualmente haciéndolas coincidir con las propiedades reales de nuestros objetos de datos. (La colección Employees 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 de árbol utilizando las propiedades rowSelection y de paging. También podemos habilitar las funciones de resúmenes, filtrado, clasificación, edición, movimiento y cambio de tamaño 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>

    Finalmente, podemos habilitar 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 mediante el uso de , IgcGridToolbar​ ​IgcGridToolbarHiding, IgcGridToolbarPinning y IgcGridToolbarExporter respectivamente.

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

    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 Name, JobTitle y Age. Como se mencionó anteriormente, el ID de los registros debe ser único ya que será nuestro PrimaryKey. El ParentID contiene el ID del nodo primario y podría establecerse como un ForeignKey. Si una fila tiene un ParentID que no coincide con ninguna fila de la cuadrícula de árbol, significa que esta fila es una fila raíz.

    La relación padre-hijo se configura mediante las propiedades y ForeignKey de la cuadrícula de PrimaryKey á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.

    • Cuando Sorting se aplica en una columna, las filas de datos se ordenan por niveles. Esto significa que las filas de nivel raíz se ordenarán independientemente de sus respectivos elementos secundarios. Sus respectivas colecciones secundarias también se ordenará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 la fijación de columnas, la ocultación de columnas y el movimiento de columnas se convierte en la columna de á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

    Additional Resources

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