Con la selección de filas en Ignite UI for Angular, hay una columna selectora de filas que precede a todas las demás columnas dentro de la fila. Cuando un usuario hace clic en el selector de filas, la fila se seleccionará o anulará la selección, lo que permitirá al usuario seleccionar varias filas de datos.
最速で機能豊富な Angular Data Grid は、ページング、ソート、フィルタリング、グループ化、PDF および Excel へのエクスポートなどの機能を提供します。究極のアプリ構築エクスペリエンスとデータ操作に必要なすべてが揃っています。
El siguiente ejemplo demuestra los tres tipos de comportamiento de selección de filas de Grid. Utilice los botones a continuación para habilitar cada uno de los modos de selección disponibles. Se proporcionará una breve descripción de cada interacción de botón a través de un cuadro de mensaje de snackbar. Utilice el botón de cambio para ocultar o mostrar la casilla de verificación del selector de filas.
Para obtener elementos recién seleccionados, puede usar event.newSelection:
<divclass="sample-container"><divclass="grid-controls"><igx-switch [(ngModel)]="hideRowSelectors">Hide Row Selectors</igx-switch><igx-buttongroup [values]="selectionModes" (selected)="selectCellSelectionMode($event)"></igx-buttongroup></div><divclass="sample-wrapper"><divclass="grid-wrapper"><igx-grid [igxPreventDocumentScroll]="true" #grid1 [data]="data | async" [height]="'550px'" [primaryKey]="'ID'"width="100%" [cellSelection]="'none'"
[rowSelection]="selectionMode" [selectedRows]="selectedRows" [hideRowSelectors]="hideRowSelectors" [allowFiltering]="true"
(rowSelectionChanging)="handleRowSelection($event)"><igx-column [field]="'Category'"></igx-column><igx-column [field]="'Type'" [filterable]="false"></igx-column><igx-column [field]="'Price'"dataType="number" [formatter]="formatCurrency"></igx-column><igx-column [field]="'Buy'"dataType="number" [formatter]="formatCurrency"></igx-column><igx-column [field]="'Sell'"dataType="number" [formatter]="formatCurrency"></igx-column><igx-column [field]="'Change'"dataType="number" [headerClasses]="'headerAlignSyle'"><ng-templateigxHeader><span>Change</span></ng-template><ng-templateigxCelllet-val><divclass="currency-badge-container"><igx-badge *ngIf="val>0"type="success"position="bottom-right"icon="arrow_upward"class="badge-left"></igx-badge><igx-badge *ngIf="val<0"type="error"position="bottom-right"icon="arrow_downward"class="error badge-left"></igx-badge><spanclass="cellAlignSyle" [class.up]="val>0" [class.down]="val<0">{{ formatNumber(val) }}</span></div></ng-template></igx-column><igx-column [field]="'Change(%)'"dataType="number" [formatter]="formatNumber"><ng-templateigxHeader><span>Change(%)</span></ng-template><ng-templateigxCelllet-val><spanclass="cellAlignSyle" [class.up]="val>0" [class.down]="val<0">{{ formatNumber(val) }}%</span></ng-template></igx-column><igx-column [field]="'Change On Year(%)'"dataType="number" [formatter]="formatNumber"><ng-templateigxCelllet-val><divclass="currency-badge-container"><igx-badge *ngIf="val>0"type="success"position="bottom-right"icon="arrow_upward"class="badge-left"></igx-badge><igx-badge *ngIf="val<0"type="error"position="bottom-right"icon="arrow_downward"class="error badge-left"></igx-badge><spanclass="cellAlignSyle" [class.up]="val>0" [class.down]="val<0">{{ formatNumber(val) }}%</span></div></ng-template></igx-column></igx-grid></div><divclass="log-wrapper"><divclass="selected-data-area"><divclass="logContainer"><divclass="highlight"><span>Events execution sequence</span><buttonclass="clearBtn"igxButton="flat" (click)="clearLog()"><igx-icon>clear</igx-icon><span>Clear log</span></button></div><hr /><div #loggerclass="logger"></div></div></div></div></div></div><igx-snackbar #snackbarRowCountactionText="Got it. Thanks!" (clicked)="snackbarRowCount.close()"><divclass="container"><igx-icon>notification_important</igx-icon><ng-container *ngIf="selectionMode === 'multiple'"><p>Number of selected rows: {{selectedRowsCount}}</p></ng-container><ng-container *ngIf="selectionMode === 'single' && this.selectedRowIndex !== undefined"><p>Currently selected row index: {{selectedRowIndex}}</p></ng-container><ng-container *ngIf="selectionMode === 'single' && this.selectedRowIndex === undefined"><p>There is no currently selected row.</p></ng-container></div></igx-snackbar><igx-snackbar #snackbaractionText="Got it. Thanks!" (clicked)="snackbar.close()"><divclass="container"><igx-icon>notification_important</igx-icon><ng-container *ngIf="selectionMode === 'multiple'"><ul><li><b>Now you can select multiple rows within a grid.</b></li><li>Click on row selector field or press SPACE key when some cell is active to toggle row
selection.
</li><li>On cell click the row get selected and previous selection state is cleared.</li><li>On cell click holding ctrl key, the row get selected and previous selection state is
preserved.
</li><li>Shift + click select a range of rows.</li></ul></ng-container><ng-container *ngIf="selectionMode === 'single'"><ul><li><b>Now you can select only one row within a grid.</b></li><li>Click on row selector field or press SPACE key when some cell is active to toggle row
selection.
</li><li>On cell click the row get selected and previous selection state is cleared.</li></ul></ng-container><ng-container *ngIf="selectionMode === 'none'"><ul><li><b>Now you are unable to select a row while interacting with grid UI.</b></li><li>If you need to select a row use grid API methods.</li></ul></ng-container></div></igx-snackbar>html
¿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.
Configuración
Para configurar la selección de filas en igx-grid, solo necesita configurar la propiedad rowSelection. Esta propiedad acepta la enumeración GridSelectionMode. GridSelectionMode expone los siguientes tres modos: ninguno, único y múltiple. A continuación veremos cada uno de ellos con más detalle.
Ninguna selección
En igx-grid por defecto, la selección de filas está deshabilitada; de lo contrario ([rowSelection]="'none'"). Por lo tanto, no puede seleccionar o anular la selección de una fila mediante la interacción con la interfaz de usuario de Grid; la única forma de completar estas acciones es utilizar los métodos API proporcionados.
Selección única
La selección de una sola fila ahora se puede configurar fácilmente; lo único que debe hacer es establecer la propiedad [rowSelection] = '"single"'. Esto le brinda la oportunidad de seleccionar sólo una fila dentro de una cuadrícula. Puede seleccionar una fila haciendo clic en una celda o presionando la tecla de espacio cuando se enfoca en una celda de la fila y, por supuesto, puede seleccionar una fila haciendo clic en el campo selector de fila. Cuando se selecciona o deselecciona una fila, se emite el evento rowSelectionChanging.
Para habilitar la selección de varias filas en igx-grid simplemente establezca la propiedad rowSelection en multiple. Esto habilitará un campo selector de filas en cada fila y en el encabezado de la cuadrícula. El selector de filas permite a los usuarios seleccionar varias filas, y la selección persiste a través del desplazamiento, la paginación y las operaciones de datos, como la clasificación y el filtrado. La fila también se puede seleccionar haciendo clic en una celda o presionando la tecla de espacio cuando una celda está enfocada. Si ha seleccionado una fila y hace clic en otra mientras mantiene presionada la tecla Mayús, esto seleccionará todo el rango de filas. En este modo de selección, cuando hace clic en una sola fila, las filas seleccionadas anteriormente se deseleccionarán. Si hace clic mientras mantiene presionada la tecla Ctrl, la fila se alternará y se conservará la selección anterior.
<!-- selectionExample.component.ts -->
publichandleRowSelection(event: IRowSelectionEventArgs) {
// use event.newSelection to retrieve primary key/row data of latest selected rowthis.selectedRowsCount = event.newSelection.length;
this.selectedRowIndex = event.newSelection[0];
}
ts
Notas
Para tener una selección de filas y celdas adecuada, mientras Grid tiene virtualización remota, se debe proporcionar una primaryKey.
Cuando el Grid tiene virtualización remota, al hacer clic en la casilla de verificación del encabezado se seleccionarán/deseleccionarán todos los registros que se encuentran actualmente en el grid. Cuando se cargan datos nuevos en la cuadrícula a pedido, las filas recién agregadas no se seleccionarán y es una limitación, por lo que debe manejar ese comportamiento usted mismo y puede seleccionar estas filas utilizando los métodos API proporcionados.
La selección de filas activará el evento rowSelectionChanging. Este evento le brinda información sobre la nueva selección, la selección anterior y las filas que se agregaron y eliminaron de la selección anterior. Además, el evento es cancelable, por lo que esto le permite evitar la selección.
Cuando la selección de filas está habilitada, se muestran los selectores de filas, pero si no desea mostrarlos, puede configurar [hideRowSelectors] = 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.
Uso de API
Seleccionar filas mediante programación
El siguiente fragmento de código se puede utilizar para seleccionar una o varias filas simultáneamente (a través de primaryKey); Además, el segundo parámetro de este método es una propiedad booleana mediante la cual puede elegir si la selección de fila anterior se borrará o no. La selección anterior se conserva de forma predeterminada.
<!-- selectionExample.component.html --><igx-grid... [primaryKey]="'ID'">
...
</igx-grid>
...
<button (click)="this.grid.selectRows([1,2,5], true)">Select 1,2 and 5</button> // select rows and clear previous selection state
html
Esto agregará las filas que corresponden a las entradas de datos con los ID 1, 2 y 5 a la selección de Cuadrícula.
Deseleccionar filas
Si necesita anular la selección de filas mediante programación, puede utilizar el método deselectRows(rowIds: []).
Cuando hay algún cambio en la selección de filas, se emite el evento rowSelectionChanging. rowSelectionChanging expone los siguientes argumentos:
oldSelection: matriz de datos de la fila que contiene el estado anterior de la selección de la fila.
newSelection: conjunto de datos de fila que coinciden con el nuevo estado de la selección de fila.
added: conjunto de datos de fila que se agregan actualmente a la selección.
removed: conjunto de datos de fila que se eliminan actualmente según el estado de selección anterior.
event: el evento original que desencadenó el cambio de selección de fila.
cancel: le permite evitar el cambio de selección de fila.
Evento de selección de fila en escenarios de datos remotos
En escenarios de datos remotos, cuando la cuadrícula tiene una primaryKey establecida, el argumento del evento rowSelectionChanging.oldSelection no contendrá el objeto de datos de fila completo para las filas que actualmente están fuera de la vista de datos. En este caso, el objeto rowSelectionChanging.oldSelection contendrá solo una propiedad, que es el campo primaryKey. Para el resto de las filas, actualmente en la vista de datos, rowSelectionChanging.oldSelection contendrá todos los datos de la fila.
/* selectionExample.component.ts */publichandleRowSelectionChange(args) {
args.cancel = true; // this will cancel the row selection
}
typescript
Seleccionar todas las filas
Otro método API útil que proporciona igx-grid es selectAll(onlyFilteredData). De forma predeterminada, este método seleccionará todas las filas de datos, pero si se aplica el filtrado, seleccionará solo las filas que coincidan con los criterios del filtro. Pero si llama al método con un parámetro falso, selectAll(false) siempre seleccionará todos los datos en la cuadrícula, incluso si se aplica el filtrado.
Tenga en cuenta que selectAll() no seleccionará las filas que se eliminan.
Deseleccionar todas las filas
igx-grid proporciona el método deselectAll(onlyFilteredData), que de forma predeterminada anulará la selección de todas las filas de datos, pero si se aplica el filtrado, anulará la selección solo de las filas que coincidan con los criterios del filtro. Pero si llama al método con el parámetro falso, deselectAll(false) siempre borrará todo el estado de selección de filas incluso si se aplica el filtrado.
Cómo obtener filas seleccionadas
Si necesita ver qué filas están seleccionadas actualmente, puede obtener sus ID de fila con el captador selectedRows.
Puede crear plantillas de encabezados y selectores de filas en la cuadrícula y también acceder a sus contextos, lo que proporciona una funcionalidad útil para diferentes escenarios.
De forma predeterminada, Grid maneja todas las interacciones de selección de filas en el contenedor principal del selector de filas o en la fila misma, dejando solo la visualización del estado para la plantilla. La anulación de la funcionalidad básica generalmente se debe realizar mediante el rowSelectionChangingevento . En caso de que implemente una plantilla personalizada con un controlador click que anule la funcionalidad básica, debe detener la propagación del evento para preservar el estado de fila correcto.
plantilla de fila
Para crear una plantilla de selector de filas personalizada, dentro de igx-grid, declare una <ng-template> con la directiva igxRowSelector. Desde la plantilla puede acceder a la variable de contexto proporcionada implícitamente, con propiedades que le brindan información sobre el estado de la fila.
La propiedad selected muestra si la fila actual está seleccionada o no, mientras que la propiedad index se puede usar para acceder al índice de la fila.
La propiedad rowID se puede utilizar para obtener una referencia de una fila de igx-grid. Esto es útil cuando implementas un controlador click en el elemento selector de fila.
En el ejemplo anterior, utilizamos una igx-checkbox y vinculamos rowContext.selected a su propiedad checked. Vea esto en acción en nuestra Row Numbering Demo.
Plantilla de encabezado
Para crear una plantilla de selector de encabezado personalizada, dentro de Grid, declare una <ng-template> con la directiva igxHeadSelector. Desde la plantilla puede acceder a la variable de contexto proporcionada implícitamente, con propiedades que le brindan información sobre el estado del encabezado.
La propiedad selectedCount le muestra cuántas filas están seleccionadas actualmente, mientras que totalCount le muestra cuántas filas hay en la cuadrícula en total.
Las propiedades selectedCount y totalCount se pueden utilizar para determinar si el selector principal debe estar marcado o indeterminado (seleccionado parcialmente).
Esta demostración muestra el uso de selectores de filas y encabezados personalizados. Este último usa rowContext.index para mostrar los números de fila y una igx-checkbox vinculada a rowContext.selected.
Esta demostración evita que se seleccionen algunas filas mediante el evento rowSelectionChanging y una plantilla personalizada con la casilla de verificación deshabilitada para filas no seleccionables.