Web Components Descripción general de la selección de columnas de cuadrícula jerárquica
La función de selección de columnas de cuadrícula jerárquica 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 columnSelection entrada. 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 Ejemplo de selección de columnas de cuadrícula jerárquica
En el ejemplo siguiente se muestran los tres tipos de IgcHierarchicalGridComponent 's Selección de columnas comportamiento. Utilice el menú desplegable de selección de columnas que aparece a continuación para habilitar cada uno de los modos de selección disponibles.
* Foto y Debut tienen la selección de columna deshabilitada.
<!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="WebHierarchicalGrid"is-horizontal="true"is-wrapping-enabled="true"><igc-property-editor-property-descriptionproperty-path="ColumnSelection"name="columnSelectionEditor"id="columnSelectionEditor"label="Column Selection"></igc-property-editor-property-description></igc-property-editor-panel></div><divclass="container fill"><igc-hierarchical-gridauto-generate="false"name="hierarchicalGrid"id="hierarchicalGrid"id="hierarchicalGrid"primary-key="ID"allow-filtering="true"column-selection="single"><igc-columnfield="Artist"header="Artist"></igc-column><igc-columnfield="Photo"header="Photo"data-type="image"selectable="false"></igc-column><igc-columnfield="Debut"header="Debut"data-type="number"selectable="false"></igc-column><igc-columnfield="GrammyNominations"header="Grammy Nominations"></igc-column><igc-columnfield="GrammyAwards"header="Grammy Awards"></igc-column><igc-row-islandchild-data-key="Albums"auto-generate="false"column-selection="single"><igc-columnfield="Album"header="Album"></igc-column><igc-columnfield="LaunchDate"header="Launch Date"data-type="date"selectable="false"></igc-column><igc-columnfield="BillboardReview"header="Billboard Review"></igc-column><igc-columnfield="USBillboard200"header="US Billboard 200"></igc-column><igc-row-islandchild-data-key="Songs"auto-generate="false"column-selection="single"><igc-columnfield="Number"header="No."></igc-column><igc-columnfield="Title"header="Title"></igc-column><igc-columnfield="Released"header="Released"data-type="date"selectable="false"></igc-column><igc-columnfield="Genre"header="Genre"></igc-column></igc-row-island></igc-row-island><igc-row-islandchild-data-key="Tours"auto-generate="false"column-selection="single"><igc-columnfield="Tour"header="Tour"selectable="false"></igc-column><igc-columnfield="StartedOn"header="Started on"selectable="false"></igc-column><igc-columnfield="Location"header="Location"selectable="false"></igc-column><igc-columnfield="Headliner"header="Headliner"></igc-column></igc-row-island></igc-hierarchical-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.
Uso básico
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.
La función Encabezados de varias columnas no se refleja en la entrada seleccionable. El ColumnGroupComponent se puede seleccionar si al menos uno de sus hijos tiene habilitado el comportamiento de selección. Además, el componente se marca como seleccionado si todos sus descendientes seleccionables están seleccionados.
*En Grupo de columnas de ubicación, solo se puede seleccionar la columna Ciudad.
<!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="container fill"><igc-hierarchical-gridcolumn-selection="multiple"name="hierarchicalGrid1"id="hierarchicalGrid1"><igc-column-groupheader="General Information"><igc-columnfield="Company"header="Company"></igc-column><igc-column-groupheader="Personal Details"><igc-columnfield="ContactName"header="Name"></igc-column><igc-columnfield="ContactTitle"header="Title"></igc-column></igc-column-group></igc-column-group><igc-column-groupheader="Address Information"><igc-column-groupheader="Location"><igc-columnfield="Address"header="Address"selectable="false"></igc-column><igc-columnfield="City"header="City"></igc-column><igc-columnfield="PostalCode"header="Postal Code"selectable="false"></igc-column><igc-columnfield="Country"header="Country"selectable="false"></igc-column></igc-column-group><igc-column-groupheader="Contact Information"><igc-columnfield="Phone"></igc-column><igc-columnfield="Fax"></igc-column></igc-column-group></igc-column-group><igc-row-islandchild-data-key="Orders"auto-generate="false"column-selection="multiple"><igc-column-groupheader="Order Information"><igc-column-groupheader="Order Details"><igc-columnfield="OrderID"></igc-column><igc-columnfield="EmployeeID"></igc-column><igc-columnfield="OrderDate"data-type="date"></igc-column><igc-columnfield="RequiredDate"data-type="date"></igc-column></igc-column-group><igc-column-groupheader="General Shipping Information"><igc-columnfield="ShippedDate"data-type="date"></igc-column><igc-columnfield="ShipVia"selectable="false"></igc-column><igc-columnfield="Freight"selectable="false"></igc-column><igc-columnfield="ShipName"></igc-column></igc-column-group><igc-column-groupheader="Shipping Location"><igc-columnfield="ShipAddress"></igc-column><igc-columnfield="ShipCity"></igc-column><igc-columnfield="ShipPostalCode"></igc-column><igc-columnfield="ShipCountry"></igc-column></igc-column-group></igc-column-group><igc-row-islandchild-data-key="OrderDetails"auto-generate="false"column-selection="single"><igc-columnfield="ProductID"></igc-column><igc-columnfield="UnitPrice"></igc-column><igc-columnfield="Quantity"selectable="false"></igc-column><igc-columnfield="Discount"></igc-column></igc-row-island></igc-row-island></igc-hierarchical-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
Combinaciones de teclado
Las combinaciones de teclado están disponibles solo cuando la entrada de selección de columna de la cuadrícula está configurada en múltiple.
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.
Manipulaciones API
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.
La declaración anterior también se aplica al ColumnGroupComponent, excepto que cuando se cambia la propiedad seleccionada, cambia el estado de sus descendientes.
Puede encontrar más información sobre las manipulaciones de API en la sección Referencias de API.
Estilo
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:
<!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="container fill"><igc-hierarchical-gridauto-generate="false"name="grid"id="grid"id="grid"primary-key="ID"allow-filtering="true"column-selection="single"><igc-columnfield="Artist"header="Artist"></igc-column><igc-columnfield="Photo"header="Photo"data-type="image"selectable="false"></igc-column><igc-columnfield="Debut"header="Debut"data-type="number"selectable="false"></igc-column><igc-columnfield="GrammyNominations"header="Grammy Nominations"></igc-column><igc-columnfield="GrammyAwards"header="Grammy Awards"></igc-column><igc-row-islandchild-data-key="Albums"auto-generate="false"column-selection="multiple"><igc-columnfield="Album"header="Album"></igc-column><igc-columnfield="LaunchDate"header="Launch Date"data-type="date"selectable="false"></igc-column><igc-columnfield="BillboardReview"header="Billboard Review"></igc-column><igc-columnfield="USBillboard200"header="US Billboard 200"></igc-column><igc-row-islandchild-data-key="Songs"auto-generate="false"column-selection="multiple"><igc-columnfield="Number"header="No."></igc-column><igc-columnfield="Title"header="Title"></igc-column><igc-columnfield="Released"header="Released"data-type="date"selectable="false"></igc-column><igc-columnfield="Genre"header="Genre"></igc-column></igc-row-island></igc-row-island><igc-row-islandchild-data-key="Tours"auto-generate="false"column-selection="single"><igc-columnfield="Tour"header="Tour"selectable="false"></igc-column><igc-columnfield="StartedOn"header="Started on"selectable="false"></igc-column><igc-columnfield="Location"header="Location"selectable="false"></igc-column><igc-columnfield="Headliner"header="Headliner"></igc-column></igc-row-island></igc-hierarchical-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