Web Components Descripción general de los encabezados de varias columnas de cuadrícula jerárquica
La característica Ignite UI for Web Components Encabezados de varias columnas de Web Components cuadrícula jerárquica le permite agrupar columnas colocándolas debajo de un encabezado múltiple común. Cada grupo de encabezados de varias columnas del IgcHierarchicalGridComponent podría ser una representación de combinaciones entre otros grupos o columnas. Esta característica es especialmente útil cuando se trata de grandes conjuntos de datos en los que el desplazamiento horizontal puede ser engorroso.
Web Components Ejemplo de encabezados de varias columnas de cuadrícula jerárquica
<!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-descriptionvalue-type="Button"primitive-value="Pin First Group"name="propertyEditorPropertyDescription1"id="propertyEditorPropertyDescription1"></igc-property-editor-property-description><igc-property-editor-property-descriptionvalue-type="Button"primitive-value="Hide First Group"name="propertyEditorPropertyDescription2"id="propertyEditorPropertyDescription2"></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="CustomerID"moving="true"allow-filtering="true"><igc-columnfield="CustomerID"data-type="string"sortable="true"resizable="true"></igc-column><igc-column-groupheader="General Information"><igc-columnfield="Company"data-type="string"sortable="true"resizable="true"></igc-column><igc-column-groupheader="Personal Details"><igc-columnfield="ContactName"data-type="string"sortable="true"resizable="true"></igc-column><igc-columnfield="ContactTitle"data-type="string"sortable="true"resizable="true"></igc-column></igc-column-group></igc-column-group><igc-column-groupheader="Address Information"><igc-column-groupheader="Location"><igc-columnfield="Address"data-type="string"sortable="true"resizable="true"></igc-column><igc-columnfield="City"data-type="string"sortable="true"resizable="true"></igc-column><igc-columnfield="PostalCode"data-type="string"sortable="true"resizable="true"></igc-column><igc-columnfield="Country"data-type="string"sortable="true"resizable="true"></igc-column></igc-column-group><igc-column-groupheader="Contact Information"><igc-columnfield="Phone"data-type="string"sortable="true"resizable="true"></igc-column><igc-columnfield="Fax"data-type="string"sortable="true"resizable="true"></igc-column></igc-column-group></igc-column-group><igc-row-islandchild-data-key="Orders"auto-generate="false"><igc-column-groupheader="Order Information"><igc-column-groupheader="Order Details"><igc-columnfield="OrderID"data-type="number"sortable="true"resizable="true"></igc-column><igc-columnfield="EmployeeID"data-type="number"sortable="true"resizable="true"></igc-column><igc-columnfield="OrderDate"data-type="date"sortable="true"resizable="true"></igc-column><igc-columnfield="RequiredDate"data-type="date"sortable="true"resizable="true"></igc-column></igc-column-group><igc-column-groupheader="General Shipping Information"><igc-columnfield="ShipDate"data-type="date"sortable="true"resizable="true"></igc-column><igc-columnfield="ShipVia"data-type="number"sortable="true"resizable="true"></igc-column><igc-columnfield="Freight"data-type="number"sortable="true"resizable="true"></igc-column><igc-columnfield="ShipName"data-type="string"sortable="true"resizable="true"></igc-column></igc-column-group><igc-column-groupheader="Shipping Locations"><igc-columnfield="ShipAddress"data-type="string"sortable="true"resizable="true"></igc-column><igc-columnfield="ShipCity"data-type="string"sortable="true"resizable="true"></igc-column><igc-columnfield="ShipPostalCode"data-type="string"sortable="true"resizable="true"></igc-column><igc-columnfield="ShipCountry"data-type="string"sortable="true"resizable="true"></igc-column></igc-column-group></igc-column-group><igc-row-islandchild-data-key="OrderDetails"auto-generate="false"><igc-columnfield="ProductID"data-type="number"sortable="true"resizable="true"></igc-column><igc-columnfield="UnitPrice"data-type="number"sortable="true"resizable="true"></igc-column><igc-columnfield="Quantity"data-type="number"sortable="true"resizable="true"></igc-column><igc-columnfield="Discount"data-type="number"sortable="true"resizable="true"></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
¿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.
La declaración de encabezados de varias columnas se logra encapsulando un conjunto de columnas en un IgcColumnGroupComponent componente con IgcHeaderComponent información de título pasada.
Para alcanzar n-th el nivel de encabezados anidados, se debe seguir la declaración anterior. Por lo tanto, el anidamiento IgcColumnGroupComponent conduce al resultado deseado.
Cuando hay un conjunto de columnas y grupos de columnas, la fijación solo funciona para las columnas principales del nivel superior. Más específicamente, no se permite fijar por grupos de columnas o columnas anidadas. Solo se permite moverse entre columnas y grupos de columnas cuando están en el mismo nivel en la jerarquía y ambos están en el mismo grupo. Cuando las columnas/grupos de columnas no están envueltos por el grupo actual, lo que significa que son columnas de nivel superior, se permite moverse entre columnas visibles completas.
Se puede crear una plantilla para cada uno de los grupos de columnas de la cuadrícula por separado. El siguiente fragmento de código demuestra cómo utilizar HeaderTemplate de un grupo de columnas:
constructor() {
var addresss = this.addresss = document.getElementById('addressInfo') as IgcColumnGroupComponent;
addresss.headerTemplate = this.columnGroupHeaderTemplate;
}
public columnGroupHeaderTemplate = (ctx: IgcColumnTemplateContext) => {
return html`${ctx.column.header.toUpperCase()}
`;
}
ts
Si desea volver a utilizar una sola plantilla para varios grupos de columnas, puede establecer la HeaderTemplate propiedad del grupo de columnas de la siguiente manera:
constructor() {
var general = this.general = document.getElementById('generalInfo') as IgcColumnGroupComponent;
var addresss = this.address = document.getElementById('addressInfo') as IgcColumnGroupComponent;
general.headerTemplate = this.columnGroupHeaderTemplate;
addresss.headerTemplate = this.columnGroupHeaderTemplate;
}
public columnGroupHeaderTemplate = (ctx: IgcColumnTemplateContext) => {
return html`${ctx.column.header.toUpperCase()}
`;
}
ts
Si se cambia la plantilla de un encabezado y el grupo de columnas correspondiente se puede mover, debe establecer el atributo arrastrable en falso en los elementos con plantilla, para que pueda manejar cualquiera de los eventos que se aplican.
El siguiente ejemplo demuestra cómo implementar grupos de columnas contraíbles utilizando plantillas de encabezado.
EXAMPLE
TS
HTML
CSS
import'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, WebHierarchicalGridDescriptionModule, WebColumnGroupDescriptionModule } from'igniteui-webcomponents-core';
import { IgcHierarchicalGridComponent, IgcColumnGroupComponent } from'igniteui-webcomponents-grids/grids';
import HierarchicalCustomers from'./HierarchicalCustomers.json';
import { IgcGridComponent, IgcColumnTemplateContext, IgcColumnComponent } from'igniteui-webcomponents-grids/grids';
import { html, nothing } from'lit-html';
import"igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import"./index.css";
exportclassSample{
private hierarchicalGrid: IgcHierarchicalGridComponent
private columnGroup1: IgcColumnGroupComponent
private columnGroup2: IgcColumnGroupComponent
private columnGroup3: IgcColumnGroupComponent
private columnGroup4: IgcColumnGroupComponent
private columnGroup5: IgcColumnGroupComponent
private _bind: () =>void;
constructor() {
var hierarchicalGrid = this.hierarchicalGrid = document.getElementById('hierarchicalGrid') as IgcHierarchicalGridComponent;
var columnGroup1 = this.columnGroup1 = document.getElementById('columnGroup1') as IgcColumnGroupComponent;
var columnGroup2 = this.columnGroup2 = document.getElementById('columnGroup2') as IgcColumnGroupComponent;
var columnGroup3 = this.columnGroup3 = document.getElementById('columnGroup3') as IgcColumnGroupComponent;
var columnGroup4 = this.columnGroup4 = document.getElementById('columnGroup4') as IgcColumnGroupComponent;
var columnGroup5 = this.columnGroup5 = document.getElementById('columnGroup5') as IgcColumnGroupComponent;
this._bind = () => {
hierarchicalGrid.data = this.hierarchicalCustomers;
columnGroup1.headerTemplate = this.webHierarchicalGridColumnGroupHeaderTemplate;
columnGroup2.headerTemplate = this.webHierarchicalGridColumnGroupHeaderTemplate;
columnGroup3.headerTemplate = this.webHierarchicalGridColumnGroupHeaderTemplate;
columnGroup4.headerTemplate = this.webHierarchicalGridColumnGroupHeaderTemplate;
columnGroup5.headerTemplate = this.webHierarchicalGridColumnGroupHeaderTemplate;
}
this._bind();
}
private _hierarchicalCustomers: any[] = HierarchicalCustomers;
publicgethierarchicalCustomers(): any[] {
returnthis._hierarchicalCustomers;
}
private _componentRenderer: ComponentRenderer = null;
publicgetrenderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
WebHierarchicalGridDescriptionModule.register(context);
WebColumnGroupDescriptionModule.register(context);
}
returnthis._componentRenderer;
}
public webHierarchicalGridColumnGroupHeaderTemplate = (ctx: IgcColumnTemplateContext) => {
const column = (ctx asany).column;
return html`<divstyle="display:flex;align-items:center;gap:5px;"><spandraggable="false" @click=${(e: any) => this.toggleColumnGroup(column)}>${this.columnGroupStates.get(column) ? "🔽" : "🔼"}</span><span>${column.header}</span></div>`;
};
public columnGroupStates = newMap<IgcColumnGroupComponent, boolean>();
publictoggleColumnGroup(columnGroup: IgcColumnGroupComponent) {
const columns = columnGroup.childColumns;
if (columnGroup.header === 'General Information') {
const column = columns[1] as IgcColumnComponent;
column.hidden = !column.hidden;
} elseif (columnGroup.header === 'Address Information') {
for (const column of columns) {
const col = column as IgcColumnComponent;
if (col.header === "Location"){
for (const cl of col.childColumns) {
const c = cl as IgcColumnComponent;
if (c.field !== "Address"){
c.hidden = !c.hidden;
}
}
}
elseif (col.header === "Contact Information"){
const c = col.childColumns[1] as IgcColumnComponent;
c.hidden = !c.hidden;
}
}
} else {
for (let i = 1; i < columns.length; i++) {
const c = columns[i] as IgcColumnComponent;
c.hidden = !c.hidden;
}
}
this.columnGroupStates.set(columnGroup, !this.columnGroupStates.get(columnGroup));
}
}
new Sample();
ts
<!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="hierarchicalGrid"id="hierarchicalGrid"id="hierarchicalGrid"primary-key="ID"moving="true"allow-filtering="true"><igc-columnfield="CustomerID"data-type="string"sortable="true"resizable="true"></igc-column><igc-column-groupheader="General Information"name="columnGroup1"id="columnGroup1"><igc-columnfield="Company"data-type="string"sortable="true"resizable="true"></igc-column><igc-column-groupheader="Personal Details"><igc-columnfield="ContactName"data-type="string"sortable="true"resizable="true"></igc-column><igc-columnfield="ContactTitle"data-type="string"sortable="true"resizable="true"></igc-column></igc-column-group></igc-column-group><igc-column-groupheader="Address Information"name="columnGroup2"id="columnGroup2"><igc-column-groupheader="Location"><igc-columnfield="Address"data-type="string"sortable="true"resizable="true"></igc-column><igc-columnfield="City"data-type="string"sortable="true"resizable="true"></igc-column><igc-columnfield="PostalCode"data-type="string"sortable="true"resizable="true"></igc-column><igc-columnfield="Country"data-type="string"sortable="true"resizable="true"></igc-column></igc-column-group><igc-column-groupheader="Contact Information"><igc-columnfield="Phone"data-type="string"sortable="true"resizable="true"></igc-column><igc-columnfield="Fax"data-type="string"sortable="true"resizable="true"></igc-column></igc-column-group></igc-column-group><igc-row-islandchild-data-key="Orders"auto-generate="false"><igc-column-groupheader="Order Information"><igc-column-groupheader="Order Details"name="columnGroup3"id="columnGroup3"><igc-columnfield="OrderID"data-type="number"sortable="true"resizable="true"></igc-column><igc-columnfield="EmployeeID"data-type="number"sortable="true"resizable="true"></igc-column><igc-columnfield="OrderDate"data-type="date"sortable="true"resizable="true"></igc-column><igc-columnfield="RequiredDate"data-type="date"sortable="true"resizable="true"></igc-column></igc-column-group><igc-column-groupheader="General Shipping Information"name="columnGroup4"id="columnGroup4"><igc-columnfield="ShipDate"data-type="date"sortable="true"resizable="true"></igc-column><igc-columnfield="ShipVia"data-type="number"sortable="true"resizable="true"></igc-column><igc-columnfield="Freight"data-type="number"sortable="true"resizable="true"></igc-column><igc-columnfield="ShipName"data-type="string"sortable="true"resizable="true"></igc-column></igc-column-group><igc-column-groupheader="Shipping Locations"name="columnGroup5"id="columnGroup5"><igc-columnfield="ShipAddress"data-type="string"sortable="true"resizable="true"></igc-column><igc-columnfield="ShipCity"data-type="string"sortable="true"resizable="true"></igc-column><igc-columnfield="ShipPostalCode"data-type="string"sortable="true"resizable="true"></igc-column><igc-columnfield="ShipCountry"data-type="string"sortable="true"resizable="true"></igc-column></igc-column-group></igc-column-group><igc-row-islandchild-data-key="OrderDetails"auto-generate="false"><igc-columnfield="ProductID"data-type="number"sortable="true"resizable="true"></igc-column><igc-columnfield="UnitPrice"data-type="number"sortable="true"resizable="true"></igc-column><igc-columnfield="Quantity"data-type="number"sortable="true"resizable="true"></igc-column><igc-columnfield="Discount"data-type="number"sortable="true"resizable="true"></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
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 clase 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="hierarchicalGrid"id="hierarchicalGrid"id="hierarchicalGrid"primary-key="ID"moving="true"allow-filtering="true"><igc-columnfield="CustomerID"data-type="string"sortable="true"resizable="true"></igc-column><igc-column-groupheader="General Information"><igc-columnfield="Company"data-type="string"sortable="true"resizable="true"></igc-column><igc-column-groupheader="Personal Details"><igc-columnfield="ContactName"data-type="string"sortable="true"resizable="true"></igc-column><igc-columnfield="ContactTitle"data-type="string"sortable="true"resizable="true"></igc-column></igc-column-group></igc-column-group><igc-column-groupheader="Address Information"><igc-column-groupheader="Location"><igc-columnfield="Address"data-type="string"sortable="true"resizable="true"></igc-column><igc-columnfield="City"data-type="string"sortable="true"resizable="true"></igc-column><igc-columnfield="PostalCode"data-type="string"sortable="true"resizable="true"></igc-column><igc-columnfield="Country"data-type="string"sortable="true"resizable="true"></igc-column></igc-column-group><igc-column-groupheader="Contact Information"><igc-columnfield="Phone"data-type="string"sortable="true"resizable="true"></igc-column><igc-columnfield="Fax"data-type="string"sortable="true"resizable="true"></igc-column></igc-column-group></igc-column-group><igc-row-islandchild-data-key="Orders"auto-generate="false"><igc-column-groupheader="Order Information"><igc-column-groupheader="Order Details"><igc-columnfield="OrderID"data-type="number"sortable="true"resizable="true"></igc-column><igc-columnfield="EmployeeID"data-type="number"sortable="true"resizable="true"></igc-column><igc-columnfield="OrderDate"data-type="date"sortable="true"resizable="true"></igc-column><igc-columnfield="RequiredDate"data-type="date"sortable="true"resizable="true"></igc-column></igc-column-group><igc-column-groupheader="General Shipping Information"><igc-columnfield="ShipDate"data-type="date"sortable="true"resizable="true"></igc-column><igc-columnfield="ShipVia"data-type="number"sortable="true"resizable="true"></igc-column><igc-columnfield="Freight"data-type="number"sortable="true"resizable="true"></igc-column><igc-columnfield="ShipName"data-type="string"sortable="true"resizable="true"></igc-column></igc-column-group><igc-column-groupheader="Shipping Locations"><igc-columnfield="ShipAddress"data-type="string"sortable="true"resizable="true"></igc-column><igc-columnfield="ShipCity"data-type="string"sortable="true"resizable="true"></igc-column><igc-columnfield="ShipPostalCode"data-type="string"sortable="true"resizable="true"></igc-column><igc-columnfield="ShipCountry"data-type="string"sortable="true"resizable="true"></igc-column></igc-column-group></igc-column-group><igc-row-islandchild-data-key="OrderDetails"auto-generate="false"><igc-columnfield="ProductID"data-type="number"sortable="true"resizable="true"></igc-column><igc-columnfield="UnitPrice"data-type="number"sortable="true"resizable="true"></igc-column><igc-columnfield="Quantity"data-type="number"sortable="true"resizable="true"></igc-column><igc-columnfield="Discount"data-type="number"sortable="true"resizable="true"></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