Descripción general de la selección de columnas de cuadrícula Web Components
La función Selección de columnas de cuadrícula Web Components en Ignite UI for Web Components ofrece una forma simplificada y similar a Excel de seleccionar y resaltar una columna completa con un solo clic. Se puede habilitar a través de la entrada columnSelection
. Gracias a la rica API, la función permite una fácil manipulación del estado de selección, la extracción de datos de las fracciones seleccionadas, operaciones de análisis de datos y visualizaciones.
Web Components Grid Column Selection Example
El siguiente ejemplo demuestra los tres tipos de IgcGridComponent
's selección de columna comportamiento. Utilice el menú desplegable de selección de columnas a continuación para habilitar cada uno de los modos de selección disponibles.
* Las columnas Título de contacto, Ciudad y Dirección tienen la selección de columna deshabilitada.
Basic Usage
La función de selección de columnas se puede habilitar a través de la entrada columnSelection
, que toma valores GridSelectionMode
.
Interacciones
El modo de selección predeterminado es None
. Si se establece en Single
o Multiple
, se podrán selectable
todas las columnas presentadas. Dicho esto, para poder seleccionar una columna simplemente debemos hacer clic en una, lo que la marcará como selected
. Si la columna no se puede seleccionar, no se aplicará ningún estilo de selección en el encabezado mientras se desplaza el cursor.
[!Note] The Multi Column Headers feature does not reflect on the
selectable
input. TheColumnGroupComponent
isselectable
, if at least one of its children has the selection behavior enabled. In addition, the component is marked asselected
if all of itsselectable
descendants areselected
.
*En Grupo de columnas de información del país, solo se pueden seleccionar la columna Ciudad y Código postal.
Keyboard Combinations
[!Note] The keyboard combinations are available only when the grid
columnSelection
input is set tomultiple
.
Hay dos escenarios para la navegación con el teclado de la función Selección de columnas:
- Selección de varias columnas: mantenga presionado Ctrl + clic en cada celda del encabezado seleccionable.
- Selección de columnas de rango: al mantener presionada la tecla Mayús + clic se seleccionan todas las columnas seleccionables intermedias.
API Manipulations
La API proporciona algunas capacidades adicionales cuando se trata de columnas no visibles, de modo que cada columna oculta se puede marcar como selected
configurando el definidor correspondiente.
[!Note] The above statement also applies to the
ColumnGroupComponent
, except that when theselected
property is changed it changes the state of its descendants.
Puede encontrar más información sobre las manipulaciones de API en la sección Referencias de API.
Styling
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 class
para la cuadrícula:
<igc-grid class="grid"></igc-grid>
Luego establezca las propiedades CSS relacionadas con esta clase:
.grid {
--ig-grid-row-selected-background: #0062A3;
--ig-grid-row-selected-text-color: #ecaa53;
--ig-grid-row-selected-hover-background: #0062A3;
--ig-grid-header-selected-text-color: #ecaa53;
--ig-grid-header-selected-background: #0062A3;
--ig-grid-row-selected-hover-text-color: #ecaa53;
--ig-grid-row-selected-hover-background: #0062A3;
}
Demo
API References
La interfaz de usuario de selección de columnas tiene algunas API más para explorar, que se enumeran a continuación.
IgcGridComponent
properties:
IgcColumnComponent
properties:
columnGroup
properties:
IgcGridComponent
events:
OnColumnsSelectionChange
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.