Angular Fijación de filas de cuadrícula

    Se pueden anclar una o varias filas en la parte superior o inferior de la cuadrícula de la interfaz de usuario de Angular. El anclaje de filas en Ignite UI for Angular permite a los usuarios finales anclar filas en un orden determinado, duplicándolas en un área especial que siempre está visible incluso cuando se desplazan por la cuadrícula verticalmente. La cuadrícula de la interfaz de usuario de Material tiene una interfaz de usuario de anclaje de fila integrada, que se habilita mediante la inicialización de un igxActionStrip componente en el contexto de la cuadrícula. Además, puede definir una interfaz de usuario personalizada y cambiar el estado de la chincheta de las filas a través de la API de fijación de filas.

    Angular Ejemplo de anclaje de filas de cuadrícula

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    IU de fijación de filas

    La interfaz de usuario integrada para fijar filas se habilita agregando un componente igxActionStrip con el componente GridPinningActions. La franja de acción se muestra automáticamente al pasar el cursor sobre una fila y mostrará un ícono de botón para fijar o quitar según el estado de la fila para la que se muestra. También se muestra una acción adicional que permite desplazar la copia de la fila fijada a la vista para cada fila fijada.

    <igx-grid [data]="data" [autoGenerate]="false">
    <igx-column *ngFor="let c of columns" [field]="c.field" [header]="c.field">
    </igx-column>

    <igx-action-strip #actionStrip>
        <igx-grid-pinning-actions></igx-grid-pinning-actions>
        <igx-grid-editing-actions></igx-grid-editing-actions>
    </igx-action-strip>
</igx-grid>
html

    API de fijación de filas

    La fijación de filas se controla mediante la entrada pinned de la row. Las filas fijadas se representan en la parte superior de la cuadrícula de forma predeterminada y permanecen fijas mediante el desplazamiento vertical de las filas no fijadas en el cuerpo de la cuadrícula.

    this.grid.getRowByIndex(0).pinned = true;
typescript

    También puede utilizar los métodos pinRow o unpinRow del Grid del IgxGridComponent para anclar o desanclar registros por su ID:

    this.grid.pinRow('ALFKI');
this.grid.unpinRow('ALFKI');
typescript

    Tenga en cuenta que el ID de fila es el valor de la clave principal, definido por la primaryKey de la cuadrícula o la instancia de registro misma. Ambos métodos devuelven un valor booleano que indica si su operación respectiva fue exitosa o no. Generalmente la razón por la que fallan es que la fila ya se encuentra en el estado deseado.

    Se fija una fila debajo de la última fila fijada. Se puede cambiar el orden de las filas fijadas suscribiéndose al evento rowPinning y cambiando la propiedad insertAtIndex de los argumentos del evento al índice de posición deseado.

    <igx-grid #grid1 [data]="data" [autoGenerate]="true" (rowPinning)="rowPinning($event)">
</igx-grid>
html
    public rowPinning(event) {
    event.insertAtIndex = 0;
}
typescript

    Posición de fijación

    Puede cambiar la posición de fijación de filas a través de la opción de configuración pinning. Le permite establecer la posición del área del pin en Superior o Inferior. Cuando se establece en Inferior, las filas fijadas se representan en la parte inferior de la cuadrícula, después de las filas no fijadas. Las filas no fijadas se pueden desplazar verticalmente, mientras que las filas fijadas permanecen fijas en la parte inferior.

    <igx-grid [data]="data" [autoGenerate]="true" [pinning]="pinningConfig"></igx-grid>
html
    public pinningConfig: IPinningConfig = { rows: RowPinningPosition.Bottom };
typescript
    App Builder | CTA Banner

    IU de fijación de filas personalizada

    Puede definir su interfaz de usuario personalizada y cambiar el estado del pin de las filas a través de la API relacionada.

    A través de una columna adicional con icono

    Digamos que en lugar de una franja de acción le gustaría mostrar un ícono de pin en cada fila, permitiendo al usuario final hacer clic y cambiar el estado del pin de una fila en particular. Esto se puede hacer agregando una columna adicional con una plantilla de celda que contenga el ícono personalizado.

    <igx-grid [data]="data" [primaryKey]="'ID'" [autoGenerate]="false">
    <igx-column width="70px">
        <ng-template igxCell let-cell="cell" let-val>
            <igx-icon class="pin-icon" (mousedown)="togglePinning(cell.row, $event)">
                {{cell.row.pinned ? 'lock' : 'lock_open'}}
            </igx-icon>
        </ng-template>
    </igx-column>
    <igx-column *ngFor="let c of columns" [field]="c.field" [header]="c.field">
    </igx-column>
</igx-grid>
html

    Al hacer clic en el icono personalizado, el estado del pin de la fila relacionada se puede cambiar utilizando los métodos API de la fila.

    public togglePinning(row: IgxGridRow, event) {
    event.preventDefault();
    if (row.pinned) {
        row.unpin();
    } else {
        row.pin();
    }
}
typescript

    Manifestación

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    Mediante arrastre de fila

    Supongamos que desea poder arrastrar y soltar directamente una fila entre las filas fijadas y no fijadas para cambiar su estado de fijación. Esto se puede lograr habilitando la función de arrastre de filas y fijando/desanclando las filas a través de la API al soltarlas.

    Primero, la cuadrícula debe marcarse como un área de colocación usando la directiva igxDrop y la funcionalidad de arrastre de filas debe habilitarse mediante la opción rowDraggable.

    <igx-grid [data]="data" [autoGenerate]="true" [rowDraggable]="true"
    [primaryKey]="'ID'" igxDrop (dropped)="onDropAllowed($event)">
</igx-grid>
html

    Luego, el evento dropped se puede utilizar para manejar la lógica de reordenamiento y fijación/desconexión.

    public onDropAllowed(args) {
    const event = args.originalEvent;
    let currRowPinnedIndex;
    const currRowIndex = this.getCurrentRowIndex(this.grid.rowList.toArray(),
        { x: event.clientX, y: event.clientY });
    if (currRowIndex === -1) { return; }

    const currRowID = this.getCurrentRowID(this.grid.rowList.toArray(),
        { x: event.clientX, y: event.clientY });

    const currentRow = this.grid.rowList.toArray().find((r) => r.rowID === currRowID);
    if (currentRow.pinned) {
        currRowPinnedIndex = this.grid.pinnedRows.indexOf(this.grid.pinnedRows.find((r) => r.rowID === currRowID));
    }
    // remove the row that was dragged and place it onto its new location
    this.grid.deleteRow(args.dragData.key);
    this.data.splice(currRowIndex, 0, args.dragData.data);
    if (currentRow.pinned && !args.dragData.pinned) {
        this.grid.pinRow(args.dragData.key, currRowPinnedIndex);
    } else if (!currentRow.pinned && args.dragData.pinned) {
        this.grid.unpinRow(args.dragData.key);
    } else if (currentRow.pinned && args.dragData.pinned) {
        this.grid.unpinRow(args.dragData.key);
        this.grid.pinRow(args.dragData.key, currRowPinnedIndex);
    }
}
typescript

    Esto permitiría reordenar las filas y moverlas entre las colecciones de filas fijadas y no fijadas.

    Manifestación

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    Limitaciones de fijación de filas

    • Solo se pueden anclar registros que existen en la fuente de datos.
    • El estado de fijación de filas no se exporta a Excel. La cuadrícula se exporta como si no se hubiera aplicado ninguna fijación de filas.
    • Debido a cómo se almacenan internamente las filas fijadas para que puedan aparecer tanto en las áreas fijadas como en las áreas no fijadas de la cuadrícula, la fijación de filas no se admite cuando los registros de la cuadrícula se obtienen desde un punto final remoto a pedido (virtualización remota).
    • Las copias de filas fijadas en el área desplazable de la cuadrícula son una parte integral de cómo otras características de la cuadrícula logran su funcionalidad en presencia de filas fijadas y, por lo tanto, su creación no se puede deshabilitar ni eliminar.
    • Como la selección de filas funciona completamente con ID de fila, al seleccionar filas fijadas también se seleccionan sus copias (y viceversa). Además, la selección de rango (por ejemplo, usando Shift + clic) dentro del área fijada funciona de la misma manera que seleccionar un rango de filas dentro del área desplazable. La selección resultante incluye todas las filas intermedias incluso si no están fijadas actualmente. Obtener las filas seleccionadas a través de la API solo devuelve una única instancia de cada registro seleccionado.
    • Cuando la cuadrícula no tiene un conjunto primaryKey y los escenarios de datos remotos están habilitados (al paginar, ordenar, filtrar y desplazar solicitudes de activación a un servidor remoto para recuperar los datos que se mostrarán en la cuadrícula), una fila perderá el siguiente estado después de un dato. solicitud completa:
      • Selección de fila
      • Fila Expandir/contraer
      • Edición de filas
      • Fijación de filas

    Estilo

    El IgxGrid permite el estilo a través de Ignite UI for Angular Theme Library. La cuadrícula expone grid-theme una amplia variedad de propiedades, que permiten la personalización de todas las características de la cuadrícula.

    A continuación, veremos los pasos para personalizar el estilo de fijación de filas de la cuadrícula.

    Importar la biblioteca de estilos

    Para comenzar a personalizar la función de fijación de filas, debe importar el archivo index, donde se encuentran todas las funciones de estilo y mixins.

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

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

    Definiendo un tema

    A continuación, cree un nuevo tema, que extienda el grid-theme y acepte los parámetros necesarios para personalizar la función de fijación de filas como desee.

    $custom-grid-theme: grid-theme(
  $pinned-border-width: 5px,
  $pinned-border-style: double,
  $pinned-border-color: #ffcd0f,
  $cell-active-border-color: #ffcd0f
);
scss

    Usando variables CSS

    El último paso es pasar el tema de cuadrícula personalizado:

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

    Manifestación

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

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

    Referencias de API

    Recursos adicionales

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