Descripción general y configuración de la cuadrícula de datos jerárquica

    La cuadrícula de datos jerárquicos Ignite UI for Web Components se utiliza para mostrar y manipular datos tabulares jerárquicos. 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 selección de datos, filtrado de estilo de Excel, ordenación, paginación, plantillas, movimiento de columnas, fijación de columnas, exportación a Excel y CSV, y más. La cuadrícula jerárquica se basa en el componente de cuadrícula plana y amplía su funcionalidad al permitir a los usuarios expandir o contraer las filas de la cuadrícula principal, revelando las cuadrículas secundarias correspondientes, cuando se necesita información más detallada.

    Web Components Hierarchical Data Grid Example

    En este ejemplo de cuadrícula Web Components, puede ver cómo los usuarios pueden visualizar conjuntos jerárquicos de datos y usar plantillas de celdas para agregar otros componentes visuales.

    Getting Started with Ignite UI for Web Components Hierarchical Grid

    Dependencies

    Para empezar con la Web Components jerárquica grid, primero necesitas instalar eligniteui-webcomponents-grids paquete.

    npm install --save igniteui-webcomponents-grids

    También debe incluir la siguiente importación para usar la cuadrícula:

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

    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 jerárquica, puede echar un vistazo a la sección de estilo.

    Using the Web Components Hierarchical Data Grid

    El enlace de datos

    La cuadrícula jerárquica igc deriva de la cuadrícula igc 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 de cuadrícula jerárquica igc, llamada isla de fila igc. El componente isla-fila igc define la configuración para cada cuadrícula hija para el 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 isla de fila igc debe especificar la clave de la propiedad que contiene los datos de los hijos.

    <igc-hierarchical-grid auto-generate="true">
    <igc-row-island child-data-key="Albums" auto-generate="true">
        <igc-row-island child-data-key="Songs" auto-generate="true">
        </igc-row-island>
    </igc-row-island>
    <igc-row-island child-data-key="Tours" auto-generate="true">
    </igc-row-island>
</igc-hierarchical-grid>

    [!NOTE] Note that instead of data the user configures only the childDataKey that the igc-hierarchical-grid needs to read to set the data automatically.

    Using Load-On-Demand

    La mayoría de las aplicaciones están diseñadas para cargar la menor cantidad de datos posible inicialmente, lo que se traduce en tiempos de carga más rápidos. En tales casos, igc-hierarchical-grid se puede configurar para permitir que los servicios creados por el usuario lo alimenten con datos bajo demanda.

    <igc-hierarchical-grid id="hGrid" primary-key="customerId" auto-generate="true" height="600px" width="100%">
    <igc-row-island id="ordersRowIsland" child-data-key="Orders" primary-key="orderId" auto-generate="true">
        <igc-row-island id="orderDetailsRowIsland" child-data-key="Details" primary-key="productId" auto-generate="true"></igc-row-island>
    </igc-row-island>
</igc-hierarchical-grid>

    import { getData } from "./remoteService";

export class HierarchicalGridLoadOnDemand {
    constructor() {
        const hierarchicalGrid = document.getElementById("hGrid") as IgcHierarchicalGridComponent;
        const ordersRowIsland = document.getElementById("ordersRowIsland");
        const orderDetailsRowIsland = document.getElementById("orderDetailsRowIsland");

        ordersRowIsland.addEventListener("gridCreated", (event: any) => {
            this.gridCreated(event, "Customers");
        });
        orderDetailsRowIsland.addEventListener("gridCreated", (event: any) => {
            this.gridCreated(event, "Orders");
        });

        hierarchicalGrid.isLoading = true;

        getData({ parentID: null, rootLevel: true, key: "Customers" }).then((data: any) => {
            hierarchicalGrid.isLoading = false;
            hierarchicalGrid.data = data;
            hierarchicalGrid.markForCheck();
        });
    }

    public gridCreated(event: CustomEvent<IgcGridCreatedEventArgs>, _parentKey: string) {
        const context = event.detail;
        const dataState = {
            key: context.owner.childDataKey,
            parentID: context.parentID,
            parentKey: _parentKey,
            rootLevel: false
        };
        context.grid.isLoading = true;
        getData(dataState).then((data: any[]) => {
            context.grid.isLoading = false;
            context.grid.data = data;
            context.grid.markForCheck();
        });
    }
}

    const URL = `https://data-northwind.indigo.design/`;

export async function getData(dataState: any): Promise<any> {
    const response = await fetch(buildUrl(dataState));
    const data = await response.json();
    return data;
}

function buildUrl(dataState: any) {
    let qS = "";
    if (dataState) {
        if (dataState.rootLevel) {
            qS += `${dataState.key}`;
        } else {
            qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`;
        }
    }
    return `${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.

    <igc-hierarchical-grid data="data" primary-key="ID" has-children-key="hasChildren">
</igc-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 quieres mostrar o ocultar el indicador de expandir/colapsar todo el encabezado, puedes usar lashowExpandAll propiedad. Esta interfaz está deshabilitada por defecto por razones de rendimiento y no se recomienda activarla en cuadrículas con grandes datos o en cuadras con carga bajo demanda.

    Características

    Las características de la cuadrícula se pueden habilitar y configurar a través del marcado igc-row-island: se aplican a cada cuadrícula que se crea para ella. Al cambiar las opciones en tiempo de ejecución a través de la instancia de la isla de filas, se cambian para cada una de las cuadrículas que ha generado.

    <igc-hierarchical-grid data="localData" auto-generate="false"
    allow-filtering='true' height="600px" width="800px">
    <igc-column field="ID" pinned="true" filterable="true"></igc-column>
    <igc-column-group header="Information">
        <igc-column field="ChildLevels"></igc-column>
        <igc-column field="ProductName" has-summary="true"></igc-column>
    </igc-column-group>
    <igc-row-island child-data-key="childData" auto-generate="false" row-selection="multiple">
        <igc-column field="ID" has-summary="true" data-type="number"></igc-column>
        <igc-column-group header="Information2">
            <igc-column field="ChildLevels"></igc-column>
            <igc-column field="ProductName"></igc-column>
        </igc-column-group>
        <igc-paginator per-page="5"></igc-paginator>
    </igc-row-island>
    <igc-paginator>
    </igc-paginator>
</igc-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 toda la cuadrícula jerárquica

    • 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 ↑ + ↓, si el elemento next/prev 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 vista visible actual, se desplaza a la vista para que la celda seleccionada esté siempre 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:

    unfold_less_icon_screenshot

    Styling

    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 el fondo del encabezado y el color del texto, primero debe configurar una clase para la cuadrícula:

    <igc-hierarchical-grid class="grid"></igc-hierarchical-grid>

    Luego establece las--header-background propiedades y--header-text-color CSS para esa clase:

    .grid {
    --header-background: #494949;
    --header-text-color: #FFF;
}

    Demo

    Known Limitations

    Limitación Descripción
    Agrupar por La función Agrupar por no es compatible con la cuadrícula jerárquica.

    API References

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