Selección de filas en cuadrícula de árbol React

    La función de selección de filas Ignite UI for React en React Tree Grid permite a los usuarios seleccionar, resaltar o deseleccionar de forma interactiva una o varias filas de datos. Hay varios modos de selección disponibles en elIgrTreeGrid:

    • Ninguna selección
    • Selección múltiple
    • Selección única

    React Row Selection Example

    La muestra siguiente muestra los cuatro tipos deIgrTreeGrid 's Selección de filas comportamiento. Utiliza los botones de abajo para activar cada uno de los modos de selección disponibles. Se proporcionará una breve descripción de cada interacción con el botón a través de un cuadro de mensajes tipo snackbar. Usa el botón de cambio para Esconderse o Programa La casilla de selección de filas.

    Setup

    Para configurar la selección de filas en elIgrTreeGrid, solo necesitas establecer larowSelection propiedad. Esta propiedad aceptaGridSelectionMode enumeración.

    GridSelectionModeexpone los siguientes modos:

    • Ninguno
    • Soltero
    • Múltiple
    • MultipleCascade

    A continuación veremos cada uno de ellos con más detalle.

    Ninguna selección

    Por defectoIgrTreeGrid, la selección de fila está deshabilitada (rowSelectiones Ninguna). Así que no puedes seleccionar o deseleccionar una fila mediante la interacción con laIgrTreeGrid interfaz; la única forma de completar estas acciones es usar los métodos de la API proporcionados.

    Selección única

    La selección de una sola fila ahora se puede configurar fácilmente, lo único que tienes que hacer es ponerrowSelection enSingle propiedad. Esto te da la oportunidad de seleccionar solo una fila dentro de una cuadrija. Puedes seleccionar una fila haciendo clic en una celda o pulsando la SPACE tecla cuando enfocas una celda de la fila, y por supuesto puedes seleccionar una fila haciendo clic en el campo selector de filas. Cuando se selecciona la fila o se desseleccionaRowSelectionChanging, se emite un evento.

    const handleRowSelection = (args: IgrRowSelectionEventArgs) => {
    if (args.detail.added.length && args.detail.added[0] === 3) {
        args.detail.cancel = true;
    }
}

<IgrTreeGrid rowSelection="single" autoGenerate={true} allowFiltering={true} onRowSelectionChanging={handleRowSelection}>
</IgrTreeGrid>

    Selección múltiple

    Para permitir la selección de varias filas en elIgrTreeGrid solo establece larowSelection propiedad paraMultiple. Esto permitirá un campo selector de filas en cada fila y en elIgrTreeGrid encabezado. El selector de filas permite a los usuarios seleccionar varias filas, manteniéndose la selección durante operaciones de desplazamiento, paginación y datos, como ordenar y filtrar. La fila también puede seleccionarse haciendo clic en una celda o pulsando la SPACE tecla cuando una celda está enfocada. Si has seleccionado una fila y haces clic en otra mientras mantienes pulsada la SHIFT tecla, esto seleccionará todo el rango de filas. En este modo de selección, cuando haces clic en una sola fila, las filas seleccionadas anteriores se desseleccionan. Si haces clic mientras mantienes pulsada la CTRL tecla, la fila se alternará y la selección anterior se conservará.

    <IgrTreeGrid primaryKey="ProductID" rowSelection="multiple"
        allowFiltering={true} autoGenerate={true}>
</IgrTreeGrid>

    Cascade Selection

    Para habilitar la selección de filas en cascada en elIgrTreeGrid solo establece larowSelection propiedad paraMultipleCascade. Esto permitirá un campo selector de filas en cada fila y en elIgrTreeGrid encabezado. El selector de filas permite a los usuarios seleccionar varias filas, lo que seleccionaría a todos los hijos del árbol de abajo. La selección persiste a través de desplazamientos, paginación y operaciones de datos, como ordenar y filtrar. La fila también puede seleccionarse haciendo clic en una celda o pulsando la SPACE tecla cuando una celda está enfocada. Si has seleccionado una fila y haces clic en otra mientras mantienes la SHIFT tecla mantufa, la selección de un registro padre seleccionará todos sus hijos aunque no estén dentro del rango seleccionado. En este modo de selección, al hacer clic en una sola fila, las filas seleccionadas previamente se desplacerán. Si haces clic mientras mantienes pulsada la CTRL tecla, la fila y sus hijos se alternarán y la selección anterior se conservará.

    <IgrTreeGrid primaryKey="ID" foreignKey="ParentID" autoGenerate={true}
        rowSelection="multipleCascade" allowFiltering={true}>
</IgrTreeGrid>

    En este modo, el estado de selección de un padre depende completamente del estado de selección de sus hijos. Cuando un padre tiene algunos hijos seleccionados y algunos no seleccionados, su casilla de verificación está en un estado indeterminado.

    Notas

    • La selección de fila activaráRowSelectionChanging el evento. Este evento te proporciona información sobre la nueva selección, la selección antigua, las filas que se han añadido y eliminado de la selección antigua. Además, el evento se puede cancelar, así que esto te permite evitar la selección.
    • Cuando la selección de filas está activada, se muestran los selectores de filas, pero si no quieres mostrarlos, puedes ponerlohideRowSelectors en true.
    • Cuando cambia entre modos de selección de filas en tiempo de ejecución, esto borrará el estado de selección de filas anterior.

    API usage

    Select Rows Programmatically

    El fragmento de código que aparece a continuación puede usarse para seleccionar una o varias filas simultáneamente (víaprimaryKey). Además, el segundo parámetro de este método es una propiedad booleana mediante la cual puedes elegir si la selección de fila anterior se limpia o no. La selección anterior se conserva por defecto.

    function onClickSelect() {
    gridRef.current.selectRows([1,2,5], true);
}

<IgrTreeGrid primaryKey="ProductID" rowSelection="multiple" autoGenerate={true} ref={gridRef}>
</IgrTreeGrid>
<button onClick={onClickSelect}>Select 1,2 and 5</button>

    Esto añadirá las filas que corresponden a las entradas de datos con IDs 1, 2 y 5 a laIgrTreeGrid selección.

    Deselect Rows

    Si necesitas deseleccionar filas programáticamente, puedes usar eldeselectRows método.

    function onClickDeselect() {
    gridRef.current.deselectRows([1,2,5]);
}

<IgrTreeGrid primaryKey="ProductID" rowSelection="multiple" autoGenerate={true} ref={gridRef}>
</IgrTreeGrid>
<button onClick={onClickDeselect}>Deselect 1,2 and 5</button>

    Row Selection Event

    Cuando hay algún cambio en la selecciónRowSelectionChanging de fila, se emite un evento .RowSelectionChanging expone los siguientes argumentos:

    • OldSelection- array de identificadores de fila que contiene el estado anterior de la selección de fila.
    • NewSelection- array de identificadores de fila que coinciden con el nuevo estado de la selección de fila.
    • Added- array de identificadores de fila que se añaden actualmente a la selección.
    • Removed- array de identificadores de fila que actualmente se eliminan según el estado de selección antiguo.
    • Event- el evento original que desencadenó el cambio de selección de fila.
    • Cancel- Permite prevenir el cambio de selección de fila.
    const handleRowSelectionChange = (args: IgrRowSelectionEventArgs) => {
    args.detail.cancel = true; // this will cancel the row selection
}

<IgrTreeGrid onRowSelectionChanging={handleRowSelectionChange}>
</IgrTreeGrid>

    Select All Rows

    Otro método útil de API queIgrTreeGrid proporciona esselectAllRows Por defecto, este método seleccionará todas las filas de datos, pero si se aplica filtrado, seleccionará solo las filas que coincidan con los criterios del filtro. Si llamas al método con un parámetro falso,SelectAllRows(false) siempre seleccionará todos los datos de la cuadrícula, incluso si se aplica filtrado.

    Nota Ten en cuenta que esoselectAllRows no seleccionará las filas que se eliminan.

    Deselect All Rows

    IgrTreeGridproporciona undeselectAllRows método que, por defecto, deselecciona todas las filas de datos, pero si se aplica filtrado solo deselecciona las filas que cumplen con los criterios del filtro. Si llamas al método con un parámetro falso,DeselectAllRows(false) siempre borrará todo el estado de selección de fila incluso si se aplica filtrado.

    How to get Selected Rows

    Si necesitas ver qué filas están seleccionadas actualmente, puedes obtener sus identificadores de fila con elselectedRows getter.

    function getSelectedRows() {
    return gridRef.current.selectedRows;
}

    Además, asignar identificadores de fila aselectedRows te permitirá cambiar el estado de selección de la cuadrícula.

    const mySelectedRows = [1,2,3];

<IgrTreeGrid primaryKey="ProductID" rowSelection="multiple" autoGenerate={false} selectedRows={mySelectedRows}>
</IgrTreeGrid>

    Row Selector Templates

    Puedes crear plantillas de seleccionadores de cabecera y fila en elIgrTreeGrid y también acceder a sus contextos, que ofrecen funcionalidad útil para diferentes escenarios.

    Por defecto, elIgrTreeGrid gestiona todas las interacciones de selección de filas en el contenedor padre del selector de filas o en la propia fila, dejando solo la visualización de estado para la plantilla. Sobrescribir la funcionalidad base debería hacerse generalmente usando el Evento de RowSelectionChanging. En caso de que implementes una plantilla personalizada con unclick que anula la funcionalidad base, deberías detener la propagación del evento para preservar el estado correcto de la fila.

    Plantilla de fila

    Para crear una plantilla personalizada de selector de filas, dentro deIgrTreeGrid puedes usar larowSelectorTemplate propiedad. Desde la plantilla puedes acceder a la variable de contexto que proporciona implícitamente, con propiedades que te dan información sobre el estado de la fila.

    Laselected propiedad indica si la fila actual está seleccionada o no, mientras que laindex propiedad puede usarse para acceder al índice de filas.

    const rowSelectorTemplate = (ctx: IgrRowSelectorTemplateContext) => {
    if (ctx.implicit.selected) {
        return (
            <>
                <div style={{justifyContent: 'space-evenly', display: 'flex', width: '70px'}}>
                    <span> ${ctx.implicit.index}</span>
                    <IgrCheckbox checked></IgrCheckbox>
                </div>
            </>
        );
    } else {
        return (
            <>
                <div style={{justifyContent: 'space-evenly', display: 'flex', width: '70px'}}>
                    <span> ${ctx.implicit.index}</span>
                    <IgrCheckbox></IgrCheckbox>
                </div>
            </>
        );
    }
}

<IgrTreeGrid primaryKey="ProductID" rowSelection="multiple" autoGenerate="false" rowSelectorTemplate={rowSelectorTemplate}>
</IgrTreeGrid>

    LarowID propiedad puede usarse para obtener una referencia de unaIgrTreeGrid fila. Esto es útil cuando implementas unclick manejador en el elemento selector de filas.

    const rowSelectorTemplate = (ctx: IgrRowSelectorTemplateContext) => {
    return (
        <>
            <IgrCheckbox onClick={(event) => onSelectorClick(event, ctx.implicit.key)}>
            </IgrCheckbox>
        </>
    );
}

    En el ejemplo anterior estamos usando unIgrCheckbox y nos vinculamosrowContext.selected a suchecked propiedad. Mira esto en acción en nuestra Demo de Numeración de Filas.

    Plantilla de encabezado

    Para crear una plantilla personalizada de selector de cabecera, dentro de ,IgrTreeGrid puedes usar laheadSelectorTemplate propiedad. Desde la plantilla puedes acceder a la variable de contexto proporcionada implícitamente, con propiedades que te dan información sobre el estado del encabezado.

    LaselectedCount propiedad te muestra cuántas filas están seleccionadas en ese momento ytotalCount cuántas filas hay en total.IgrTreeGrid​

    const headSelectorTemplate = (ctx: IgrHeadSelectorTemplateContext) => {
    return (
        <>
            {ctx.implicit.selectedCount} / {ctx.implicit.totalCount}
        </>
    );
};

    LasselectedCount propiedades ytotalCount pueden usarse para determinar si el selector de cabeza debe estar marcado o indeterminado (parcialmente seleccionado).

    const headSelectorTemplate = (ctx: IgrHeadSelectorTemplateContext) => {
    const implicit: any = ctx.implicit;
    if (implicit.selectedCount > 0 && implicit.selectedCount === implicit.totalCount) {
            return (
                <>
                    <IgrCheckbox checked></IgrCheckbox>
                </>
            );
        } else if (implicit.selectedCount > 0 && implicit.selectedCount !== implicit.totalCount) {
            return (
                <>
                    <IgrCheckbox indeterminate></IgrCheckbox>
                </>
            );
        }
        return (
            <>
                <IgrCheckbox ></IgrCheckbox>
            </>
        );
}

<IgrTreeGrid primaryKey="ProductID" rowSelection="multiple" autoGenerate={true} headSelectorTemplate={headSelectorTemplate}>
</IgrTreeGrid>

    Row Numbering Demo

    Esta demo muestra el uso de selectores personalizados de cabecera y filas. Este último se utilizaindex para mostrar números de fila y unIgrCheckbox bound toselected.

    Excel Style Row Selectors Demo

    Esta demostración utiliza plantillas personalizadas que se parecen a los selectores de filas y encabezados similares a los de Excel.

    Conditional Selection Demo

    Esta demo impide que algunas filas se seleccionen usando elRowSelectionChanging evento y una plantilla personalizada con la casilla desactivada para filas no seleccionables.

    API References

    Additional Resources

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