React Diseño de cuadrícula de varias filas

    El diseño de varias filas del Ignite UI for React amplía las capacidades de representación de la cuadrícula React. La función permite dividir un solo registro de datos en varias filas visibles.

    React Ejemplo de diseño de varias filas

    EXAMPLE
    DATA
    TSX
    CSS

    ¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas completo Ignite UI for React y comienza a crear tus propias aplicaciones en minutos. Descárgalo gratis.

    La declaración de diseño de varias filas se logra a través IgrColumnLayout del componente. Cada IgrColumnLayout componente debe considerarse como un bloque, que contiene uno o varios IgrColumn componentes. Algunas de las características de la cuadrícula funcionan a nivel de bloque (se enumeran en la sección "Integración de características" a continuación). Por ejemplo, la virtualización usará el bloque para determinar los fragmentos virtuales, por lo tanto, para un mejor rendimiento, divida las columnas en más columnLayout bloques si el diseño lo permite. No debe haber columnas fuera de esos bloques y no debe usarse columnGroup al configurar un diseño de varias filas. El diseño de varias filas se implementa sobre la especificación de diseño de cuadrícula y debe cumplir con sus requisitos.

    El componente IgrColumn expone cuatro propiedades IgrInput para determinar la ubicación y el intervalo de cada celda:

    • ColStart: índice de columna desde el que comienza el campo. Esta propiedad es obligatoria.
    • RowStart: índice de fila desde el que comienza el campo. Esta propiedad es obligatoria.
    • ColEnd: índice de columna donde debe terminar el campo actual. La cantidad de columnas entre colStart y colEnd determinará la cantidad de columnas que abarcan ese campo. Esta propiedad es opcional. Si no, establezca el valor predeterminado en colStart + 1.
    • RowEnd: índice de fila donde debe terminar el campo actual. La cantidad de filas entre RowStart y RowEnd determinará la cantidad de filas que abarcan ese campo. Esta propiedad es opcional. Si no, establezca el valor predeterminado en rowStart + 1.
    <IgrColumnLayout>
        <IgrColumn rowStart="1" colStart="1" rowEnd="3" field="ID"></IgrColumn>
    </IgrColumnLayout>
    <IgrColumnLayout>
        <IgrColumn rowStart="1" colStart="1" colEnd="3" field="CompanyName"></IgrColumn>
        <IgrColumn rowStart="2" colStart="1" colEnd="2" field="ContactName"></IgrColumn>
        <IgrColumn rowStart="2" colStart="2" colEnd="3" field="ContactTitle"></IgrColumn>
    </IgrColumnLayout>
    <IgrColumnLayout>
        <IgrColumn rowStart="1" colStart="1" colEnd="3" field="Country"></IgrColumn>
        <IgrColumn rowStart="1" colStart="3" colEnd="5" field="Region"></IgrColumn>
        <IgrColumn rowStart="1" colStart="5" colEnd="7" field="PostalCode"></IgrColumn>
        <IgrColumn rowStart="2" colStart="1" colEnd="4" field="City"></IgrColumn>
        <IgrColumn rowStart="2" colStart="4" colEnd="7" field="Address"></IgrColumn>
    </IgrColumnLayout>
    <IgrColumnLayout>
        <IgrColumn rowStart="1" colStart="1" field="Phone"></IgrColumn>
        <IgrColumn rowStart="2" colStart="1" field="Fax"></IgrColumn>
    </IgrColumnLayout>
    tsx

    El resultado de la configuración anterior se puede ver en la siguiente captura de pantalla:

    Las propiedades RowStart y ColStart deben establecerse para cada IgrColumn en un columnLayout. El componente columnLayout no comprueba si el diseño es correcto y no genera errores ni advertencias al respecto. Los desarrolladores deben asegurarse de que la declaración de su diseño sea correcta y completa, de lo contrario, pueden terminar en un diseño roto con desalineaciones, superposiciones e inconsistencias en el navegador.

    Integración de funciones

    Debido al enfoque de representación completamente diferente del diseño de varias filas, algunas de las características de columna solo funcionarán en columnLayout el componente. Estas características son la fijación de columnas y la ocultación de columnas. Por ejemplo, la clasificación y la agrupación funcionarán de la misma manera en el IgrColumn componente.

    • Filtrado: solo se admite el filtrado de estilos de Excel. Establecer FilterMode explícitamente en FilterMode.quickFilter no tiene ningún efecto.
    • Paginación: funciona con registros, no con filas visuales.
    • La opción Agrupar por: HideGroupedColumns no tiene ningún efecto en el diseño de varias filas. Las columnas agrupadas siempre están visibles.

    Actualmente no se admiten las siguientes funciones:

    • Columna en movimiento
    • Encabezados de varias columnas
    • Exportar a Excel
    • resúmenes
    Ignite UI for React | CTA Banner

    Navegación por teclado

    IgrGrid con diseños de varias filas proporciona navegación con teclado integrado.

    Navegación Horizontal

    • o : se mueve a la celda adyacente a la izquierda/derecha dentro de la fila actual sin verse afectada por los diseños de columnas definidos. Si la celda actual abarca más de una fila, y deben navegar a la primera celda a la izquierda y a la derecha con la misma rowStart, a menos que haya navegado a alguna otra celda adyacente antes. La navegación almacena la celda de navegación inicial y navega a las celdas con la misma rowStart si es posible.
    • Ctrl + (INICIO) o Ctrl + (FIN): navegue hasta el inicio o el final de la fila y seleccione la celda de acuerdo con la celda de navegación inicial.

    Navegación vertical

    • o : se mueve a la celda de arriba/abajo en relación con una posición inicial y no se ve afectado por las filas. Si la celda actual abarca más de una columna, se seleccionará la siguiente celda activa de acuerdo con la celda de navegación inicial.
    • Ctrl + o Ctrl + Abajo: navega y aplica el foco en la misma columna en la primera o en la última fila.
    • Ctrl + Inicio o Ctrl + Fin: navega a la primera fila y enfoca la primera celda o navega a la última fila y enfoca la última celda.

    La navegación a través de celdas que abarcan varias filas o columnas se realiza de acuerdo con la celda de navegación inicial y permitirá regresar a la celda inicial usando la tecla para la dirección opuesta. Se utiliza el mismo enfoque al navegar a través de filas de grupos.

    La selección y la selección de varias celdas funcionan en el diseño, lo que significa que cuando una celda está activa, se seleccionará su diseño. Además, todas las funciones de selección múltiple, como la selección por arrastre, son aplicables y funcionarán por diseño, no por celda.

    Navegación con teclado personalizado

    La cuadrícula permite personalizar el comportamiento de navegación predeterminado cuando se presiona una determinada tecla. Acciones como ir a la siguiente celda o a la siguiente celda se pueden manejar fácilmente con la poderosa API de navegación por teclado:

    • GridKeydown está expuesto. El evento emitirá IGridKeydownEventArgs. Este evento está disponible solo a través de las combinaciones de teclas del teclado mencionadas anteriormente; para todas las demás acciones clave, puede usar el evento KeyDown.
    • NavigateTo: este método le permite navegar a una posición según RowIndex y VisibleColumnIndex proporcionados.

    La siguiente demostración agrega navegación adicional hacia abajo/arriba mediante las teclas Enter y Shift + Enter, similar al comportamiento observado en Excel.

    Manifestación

    EXAMPLE
    DATA
    TSX
    CSS

    Estilo

    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:

    <IgrGrid className="grid"></IgrGrid>
    tsx

    Luego establezca las propiedades CSS relacionadas con esta clase:

    .grid {
        --ig-grid-cell-active-border-color: #ffcd0f;
        --ig-grid-cell-selected-background: #6f6f6f;
        --ig-grid-row-hover-background: #fde069;
        --ig-grid-row-selected-background: #8d8d8d;
        --ig-grid-header-background: #494949;
        --ig-grid-header-text-color: #fff;
    }
    css

    Manifestación

    EXAMPLE
    DATA
    TSX
    CSS

    Referencias de API

    Recursos adicionales

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