Web Components Descripción general de la selección de cuadrícula
Con la función Ignite UI for Web Components Select de Web Components Grid, puede interactuar y manipular fácilmente los datos mediante simples interacciones con el ratón. Hay tres modos de selección disponibles:
El siguiente ejemplo demuestra tres tipos de comportamientos de selección de celdas en IgcGridComponent. Utilice los botones a continuación para habilitar cada uno de los modos de selección disponibles.
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample ig-typography"><divclass="options vertical"><igc-property-editor-panelname="PropertyEditor"id="PropertyEditor"description-type="WebGrid"is-horizontal="true"is-wrapping-enabled="true"><igc-property-editor-property-descriptionproperty-path="CellSelection"name="CellSelectionEditor"id="CellSelectionEditor"value-type="EnumValue"drop-down-names="None, Single, Multiple"drop-down-values="NOne, Single, Multiple"></igc-property-editor-property-description></igc-property-editor-panel></div><divclass="container fill"><igc-gridauto-generate="false"name="grid"id="grid"><igc-columnfield="ProductID"header="Product ID"></igc-column><igc-columnfield="ProductName"header="Product Name"></igc-column><igc-columnfield="UnitsInStock"header="Units In Stock"data-type="number"></igc-column><igc-columnfield="UnitPrice"header="Units Price"data-type="number"></igc-column><igc-columnfield="Discontinued"data-type="boolean"></igc-column><igc-columnfield="OrderDate"header="Order Date"data-type="date"></igc-column></igc-grid></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Web Components Opciones de selección de cuadrícula
La propiedad rowSelection le permite especificar las siguientes opciones:
La selección None fila estaría deshabilitada para IgcGridComponent.
Single: la selección de solo una fila dentro del IgcGridComponent estaría disponible.
Multiple: la selección de varias filas estaría disponible usando los selectores de filas, con una combinación de teclas como Ctrl + clic, o presionando la tecla de espacio una vez que una celda está enfocada.
La propiedad cellSelection le permite especificar las siguientes opciones:
None: la selección de celdas se deshabilitaría para IgcGridComponent.
Single: la selección de solo una celda dentro del IgcGridComponent estaría disponible.
Multiple: actualmente, este es el estado predeterminado de la selección en IgcGridComponent. La selección de varias celdas está disponible arrastrando el mouse sobre las celdas, después de hacer clic continuamente con el botón izquierdo del mouse.
Web Components Selección de columnas de cuadrícula
La selectable propiedad permite especificar las siguientes opciones para cada uno IgcColumnComponent. La selección de columna correspondiente se habilitará o deshabilitará si esta propiedad se establece en true o false, respectivamente.
Esto lleva a las siguientes tres variaciones:
Selección única: haga clic con el mouse sobre la celda de la columna.
Selección de varias columnas: mantenga presionado Ctrl + clic del mouse sobre las celdas de la columna.
Selección de columnas de rango: mantener presionada la tecla Mayús + clic del mouse selecciona todo lo que se encuentra en el medio.
Usando el evento ContextMenu puede agregar un menú contextual personalizado para facilitar su trabajo con IgcGridComponent. Con un clic derecho en el cuerpo de la grilla, el evento emite la celda en la que se activa. El menú contextual funcionará con la celda emitida.
Si hay una selección multicelda, pondremos lógica, que comprobará si la celda seleccionada está en el área de selección multicelda. Si es así, también emitiremos los valores de las celdas seleccionadas.
IgcGridComponent recuperará los datos copiados y los pegará en un elemento contenedor.
La plantilla que vamos a utilizar para combinar la grilla con el menú contextual:
<divclass="container sample"><divclass="wrapper"><igc-gridauto-generate="false"width="50%"height="100%"name="grid"id="grid"><igc-columnfield="ProductID"header="Product ID"></igc-column><igc-columnfield="ProductName"header="Product Name"></igc-column><igc-columnfield="UnitsInStock"header="Units In Stock"data-type="number"></igc-column><igc-columnfield="UnitPrice"header="Units Price"data-type="number"></igc-column><igc-columnfield="Discontinued"data-type="boolean"></igc-column><igc-columnfield="OrderDate"header="Order Date"data-type="date"></igc-column></igc-grid><divid="selectedArea"class="selected-data-area"></div></div></div><divid="menu"style="display: none;"class="contextmenu"><spanid="copySingleCell"class="item"><igc-iconname="content_copy"></igc-icon>Copy Cell Data
</span><spanid="copyRow"class="item"><igc-iconname="content_copy"></igc-icon>Copy Row Data
</span><spanid="copyMultiCells"class="item"><igc-iconname="content_copy"></igc-icon>Copy Cells Data
</span></div></div>html
Seleccione varias celdas y presione el botón derecho del mouse. Aparecerá el menú contextual y después de seleccionar Copiar datos de celdas, los datos seleccionados aparecerán en el cuadro vacío de la derecha.
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><divclass="wrapper"><igc-gridauto-generate="false"width="50%"height="100%"name="grid"id="grid"><igc-columnfield="ProductID"header="Product ID"></igc-column><igc-columnfield="ProductName"header="Product Name"></igc-column><igc-columnfield="UnitsInStock"header="Units In Stock"data-type="number"></igc-column><igc-columnfield="UnitPrice"header="Units Price"data-type="number"></igc-column><igc-columnfield="Discontinued"data-type="boolean"></igc-column><igc-columnfield="OrderDate"header="Order Date"data-type="date"></igc-column></igc-grid><divid="selectedArea"class="selected-data-area"></div></div></div><divid="menu"style="display: none;"class="contextmenu"><spanid="copySingleCell"class="item"><igc-iconname="content_copy"></igc-icon>Copy Cell Data
</span><spanid="copyRow"class="item"><igc-iconname="content_copy"></igc-icon>Copy Row Data
</span><spanid="copyMultiCells"class="item"><igc-iconname="content_copy"></igc-icon>Copy Cells Data
</span></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
Cuando la cuadrícula no tiene primaryKey establecida 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: