Web Components Selección de filas de cuadrícula

La función de selección de filas Ignite UI for Web Components en Web Components 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 elIgcGridComponent:

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

Web Components Row Selection Example

La muestra siguiente muestra los tres tipos deIgcGridComponent 's Selección de filas comportamiento. Utiliza el desplegable de abajo para activar cada uno de los modos de selección disponibles. Usa la casilla para Esconderse o Programa las casillas de selección de filas.

Setup

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

GridSelectionModeexpone los siguientes modos:

• Ninguno
• Soltero
• Múltiple

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

Ninguna selección

Por defectoIgcGridComponent, la selección de fila está deshabilitada (rowSelectiones Ninguna). Así que no puedes seleccionar o deseleccionar una fila mediante la interacción con laIgcGridComponent 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.

<igc-grid id="grid" row-selection="Single" auto-generate="true"
        allow-filtering="true">
</igc-grid>

constructor() {
    const grid = document.getElementById('grid') as IgcGridComponent;
    grid.data = this.data;
    grid.addEventListener("rowSelectionChanging", this.handleRowSelection);
}

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

Selección múltiple

Para permitir la selección de varias filas en elIgcGridComponent solo establece larowSelection propiedad paraMultiple. Esto permitirá un campo selector de filas en cada fila y en elIgcGridComponent 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á.

<igc-grid id="grid" primary-key="ProductID" row-selection="Multiple"
        allow-filtering="true" auto-generate="true">
</igc-grid>

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.

<igc-grid id="grid"
primary-key="ProductID"
row-selection="Multiple"
auto-generate="true">
</igc-grid>

<button id='select'>Select 1,2 and 5</button>

constructor() {
    document.getElementById("select").addEventListener("click", this.onClickSelect);
}
public onClickSelect() {
    const grid = document.getElementById("grid") as IgcGridComponent;
    grid.selectRows([1,2,5], true);
}

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

Deselect Rows

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

<igc-grid id="grid"
primary-key="ProductID"
row-selection="Multiple"
auto-generate="true">
</igc-grid>

<button id='deselect'>DeSelect</button>

constructor() {
    document.getElementById("deselect").addEventListener("click", this.onClickDeselect);
}
public onClickDeselect() {
    const grid = document.getElementById("grid") as IgcGridComponent;
    grid.deselectRows([1,2,5]);
}

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.

<igc-grid id="grid">
</igc-grid>

constructor() {
    const grid = document.getElementById('grid') as IgcGridComponent;
    grid.data = this.data;
    grid.addEventListener("rowSelectionChanging", this.handleRowSelectionChange);
}

public handleRowSelectionChange(args) {
    args.detail.cancel = true; // this will cancel the row selection
}

Select All Rows

Otro método útil de API queIgcGridComponent 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

IgcGridComponentproporciona 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.

public getSelectedRows() {
    const grid = document.getElementById('grid') as IgcGridComponent;
    const currentSelection = grid.selectedRows; // return array of row IDs
}

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

public mySelectedRows = [1, 2, 3]; // an array of row IDs
constructor() {
    const grid = document.getElementById('grid') as IgcGridComponent;
    grid.data = this.data;
    grid.selectedRows = this.mySelectedRows;
}

Row Selector Templates

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

Por defecto, elIgcGridComponent 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 deigc-grid 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.

public rowSelectorTemplate = (ctx: IgcRowSelectorTemplateContext) => {
    if (ctx.implicit.selected) {
        return html`<div style="justify-content: space-evenly;display: flex;width: 70px;">
            <span> ${ctx.implicit.index}</span>
            <igc-checkbox checked></igc-checkbox>
            </div>`;
    } else {
        return html`<div style="justify-content: space-evenly;display: flex;width: 70px;">
            <span> ${ctx.implicit.index}</span>
            <igc-checkbox></igc-checkbox>
            </div>`;
    }
}

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

public rowSelectorTemplate = (ctx: IgcRowSelectorTemplateContext) => {
    return html`
        <igc-checkbox
            @click="${(event: any) => {
            this.onSelectorClick(event, ctx.implicit.key);
            }}"
        ></igc-checkbox>
    `;
}

En el ejemplo anterior estamos usando unIgcCheckboxComponent 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 ,IgcGridComponent 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.IgcGridComponent​

public headSelectorTemplate = (ctx: IgcHeadSelectorTemplateContext) => {
    return html` ${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).

<igc-grid id="grid"
primary-key="ProductID"
row-selection="Multiple"
auto-generate="true">
</igc-grid>

constructor() {
    const grid = document.getElementById('grid') as IgcGridComponent;
    grid.data = this.data;
    grid.headSelectorTemplate = this.headSelectorTemplate;
}

public headSelectorTemplate = (ctx: IgcHeadSelectorTemplateContext) => {
    const implicit: any = ctx.implicit;
    if (implicit.selectedCount > 0 && implicit.selectedCount === implicit.totalCount) {
            return html`<igc-checkbox checked></igc-checkbox>`;
        } else if (implicit.selectedCount > 0 && implicit.selectedCount !== implicit.totalCount) {
            return html`<igc-checkbox indeterminate></igc-checkbox>`;
        }
        return html`<igc-checkbox></igc-checkbox>`;
}

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 unIgcCheckboxComponent 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

• IgcGridComponent
• IgcGridRowComponent

Additional Resources

• Selección
• Selección de celda
• Paginación
• Filtración
• Clasificación
• resúmenes
• Columna en movimiento
• Fijación de columnas
• Cambio de tamaño de columna
• Virtualización y rendimiento

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

• Ignite UI for Web Components Foros
• Ignite UI for Web Components GitHub