Angular Diseño de varias filas

    El diseño multi-fila amplía las capacidades de renderizado de laigxGridComponent. La función permite dividir un único registro de datos en varias filas visibles.

    Angular Multi-row Layout Example

    La declaración de la disposición multi-fila se logra medianteigx-column-layout componentes. Cadaigx-column-layout componente debe considerarse como un bloque, que contiene uno o variosigx-column componentes. Algunas de las características de la cuadrícula funcionan a nivel de bloque (esas están listadas en la sección "Integración de Características" más abajo). Por ejemplo, la virtualización usará el bloque para determinar los chunks virtuales, así que para mejorar el rendimiento divide las columnas en másigx-column-layout bloques si la disposición lo permite. No debería haber columnas fuera de esos bloques ni debería usarse alIgxColumnGroupComponent configurar una disposición de varias filas. El diseño de varias filas se implementa sobre la especificación de disposición en cuadrícula y debe cumplir con sus requisitos.

    IgxColumnComponentexpone cuatro@Input propiedades para determinar la ubicación y el alcance de cada celda:

    • colStart- índice de columna desde el que comienza el campo. Esta propiedad es obligatoria.
    • rowStart- índice de filas 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, se establece porcolStart + 1 defecto.
    • rowEnd- índice de filas donde debería 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, se establece porrowStart + 1 defecto.
    <igx-column-layout>
 <igx-column [rowStart]="1" [colStart]="1" [rowEnd]="3" field="ID"></igx-column>
</igx-column-layout>
<igx-column-layout>
 <igx-column [rowStart]="1" [colStart]="1" [colEnd]="3" field="CompanyName"></igx-column>
 <igx-column [rowStart]="2" [colStart]="1" [colEnd]="2" field="ContactName"></igx-column>
 <igx-column [rowStart]="2" [colStart]="2" [colEnd]="3" field="ContactTitle"></igx-column>
</igx-column-layout>
<igx-column-layout>
 <igx-column [rowStart]="1" [colStart]="1" [colEnd]="3" field="Country"></igx-column>
 <igx-column [rowStart]="1" [colStart]="3" [colEnd]="5" field="Region"></igx-column>
 <igx-column [rowStart]="1" [colStart]="5" [colEnd]="7" field="PostalCode"></igx-column>
 <igx-column [rowStart]="2" [colStart]="1" [colEnd]="4" field="City"></igx-column>
 <igx-column [rowStart]="2" [colStart]="4" [colEnd]="7" field="Address"></igx-column>
</igx-column-layout>
<igx-column-layout>
    <igx-column [rowStart]="1" [colStart]="1" field="Phone"></igx-column>
    <igx-column [rowStart]="2" [colStart]="1" field="Fax"></igx-column>
</igx-column-layout>

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

    Ejemplo de disposición de varias filas
    Note

    rowStartycolStart las propiedades deben establecerse para cadaigx-column uno.igx-column-layout EligxColumnLayout componente no verifica si el diseño es correcto ni lanza errores o advertencias al respecto. Los desarrolladores deben asegurarse de que la declaración de su diseño sea correcta y completa, de lo contrario pueden acabar con un diseño roto, con desalineaciones, solapamientos e inconsistencias en el navegador.

    Feature Integration

    Debido al enfoque de renderizado completamente diferente de la disposición multifila, algunas de las características de columna funcionan solo enigx-column-layout componentes. Estas características son el Apuntamiento de Columnas y el Ocultamiento de Columnas. Otras como Ordenar y Agrupar funcionarán de la misma manera, enigx-column componentes.

    • Filtrado: solo se admite el filtrado estilo Excel. ConfigurarfilterMode explícitamente comoFilterMode.quickFilter no tiene ningún efecto.
    • Paginación: funciona con registros, no con filas visuales.
    • La opción Agrupar por -hideGroupedColumnsno tiene efecto en la disposición de varias filas. Las columnas agrupadas son siempre visibles.

    Actualmente no se admiten las siguientes funciones:

    • Columna en movimiento
    • Encabezados de varias columnas
    • Exportar a Excel
    • resúmenes

    Keyboard Navigation

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

    Horizontal navigation

    • Arrow Left o Arrow Right: moverse a la celda adyacente a la izquierda/derecha dentro de la fila actual, sin verse afectado por la disposición de columnas que están definidas. Si la celda actual abarca más de una fila y Arrow Left​ ​Arrow Right debería navegar a la primera celda a la izquierda y a la derecha con la mismarowStart, a menos que hayas navegado antes a otra celda adyacente. La navegación almacena la celda de navegación inicial y navega hasta las celdas con larowStart misma si es posible.
    • Ctrl + Flecha izquierda (INICIO) o Ctrl + Flecha derecha (FIN): navegue hasta el inicio o el final de la fila y seleccione la celda de acuerdo con la celda de navegación inicial.

    Vertical navigation

    • Flecha hacia arriba o Flecha hacia abajo: 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 + Flecha arriba 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.
    Note

    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.

    Note

    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.

    Custom Keyboard Navigation

    La cuadrícula permite personalizar el comportamiento de navegación por defecto al pulsar una tecla concreta. Acciones comogoing to the next cell ocell below podrían gestionarse fácilmente con la potente API de navegación de teclado:

    • gridKeydownqueda expuesto. El evento emitiráIGridKeydownEventArgs. Este evento solo está disponible a través de las combinaciones de teclas del teclado mencionadas anteriormente; para todas las demás acciones de teclas puedes usarkeydown el evento(keydown)="onKeydown($event)"
    • navigateTo- este método permite navegar hasta una posición basada en proporcionadosrowindex yvisibleColumnIndex

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

    Demo

    Layout Configurator

    A veces, al configurar la disposición de una columna, puede ser un reto calcular y establecer el yorcolStart​colEnd​rowStart y.rowEnd Especialmente cuando hay muchas columnas en un solo diseño. Por eso hemos creado un pequeño configurador, para que puedas hacerlo fácilmente y tener una vista previa similar de cómo se vería dentro de igxGrid cuando se aplica. Puedes hacer las siguientes interacciones con él:

    • Establezca el número de filas para toda la configuración. Todos los diseños deben tener la misma cantidad de filas.
    • Añade/elimina disposiciones de columnas haciendo clic en elAdd Layout chip o reordenándolas arrastrando un chip de diseño a la izquierda/derecha.
    • Establezca configuraciones específicas para cada diseño como número de columnas y su ancho. La configuración se refiere al diseño seleccionado actualmente.
    • Redimensiona las celdas de columna en la vista previa del diseño para que puedan abarcar más columnas/filas o límpialas usando elDelete botón.
    • Establezca columnas en la vista previa arrastrando un chip de columna al lugar que desee que esté.
    • Añade/elimina nuevas columnas usando elAdd Column chip.
    • Prepara la salida de la plantilla de toda la configuración para colocarla dentro de un igxGrid o la representación JSON que también puede usarse y analizarse en tu plantilla usandoNgForOf, por ejemplo.

    De forma predeterminada, hemos configurado las mismas columnas que en nuestro ejemplo anterior, pero se pueden borrar y configurar para que coincidan con la configuración deseada.

    Estilismo

    El igxGrid permite estilizar a través de laIgnite UI for Angular Theme Library. Exponegrid-theme una gran variedad de propiedades, que permiten personalizar todas las características de la cuadrícula.

    En los pasos siguientes, veremos los pasos para personalizar el estilo de diseño de varias filas de la cuadrícula.

    Importing global theme

    Para comenzar la personalización de la función de Disposición Multifila, necesitas importar elindex archivo, donde se encuentran todas las funciones de estilo y los mixins.

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

    Defining custom theme

    A continuación, crea un nuevo tema que extienda ygrid-theme acepte los parámetros necesarios para personalizar el diseño de la característica según se desee.

    $custom-theme: grid-theme(
  $cell-active-border-color: #ffcd0f,
  $cell-selected-background: #6f6f6f,
  $row-hover-background: #fde069,
  $row-selected-background: #8d8d8d,
  $header-background: #494949,
  $header-text-color: #fff,
  $sorted-header-icon-color: #ffcd0f,
  $sortable-header-icon-hover-color: #e9bd0d
);
    Note

    En lugar de codificar los valores de color como acabamos de hacer, podemos lograr mayor flexibilidad en cuanto a colores usando laspalette funciones ycolor. Por favor, consulta elPalettes tema para obtener una guía detallada sobre cómo utilizarlos.

    Applying the custom theme

    La forma más sencilla de aplicar tu tema es con unasass @include instrucción en el archivo de estilos globales:

    @include css-vars($custom-theme);

    Para que el tema personalizado solo afecte a un componente específico, puedes mover todos los estilos que acabas de definir del archivo de estilos globales al archivo de estilo del componente personalizado (incluyendo la importación delindex archivo).

    De esta manera, debido a Angular ViewEncapsulation, los estilos solo se aplicarán al componente personalizado.

    Demo

    Note

    La muestra no se verá afectada por el tema global seleccionado deChange Theme.

    API References

    Additional Resources

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