Web Components Fijación de columnas de cuadrícula jerárquica
La función de fijación de columnas Ignite UI for Web Components en Web Components cuadrícula jerárquica permite a los desarrolladores bloquear columnas específicas en el orden deseado, lo que garantiza la visibilidad todo el tiempo, incluso cuando los usuarios se desplazan horizontalmente por el IgcGridComponent. Hay una interfaz de usuario integrada para la fijación de columnas, a la que se puede acceder a través de la barra de herramientas de la cuadrícula jerárquica Web Components. Además, los desarrolladores tienen la flexibilidad de crear una interfaz de usuario personalizada que cambia el estado de los pines de las columnas.
Web Components Ejemplo de anclaje de columnas de cuadrícula jerárquica
En este ejemplo se muestra cómo puede anclar una o varias columnas a la izquierda o a la derecha del IgcHierarchicalGridComponent archivo.
<!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-gridname="grid"id="grid"id="grid"column-selection="single"primary-key="CustomerID"><igc-grid-toolbar
><igc-grid-toolbar-actions
><igc-grid-toolbar-pinning
></igc-grid-toolbar-pinning></igc-grid-toolbar-actions></igc-grid-toolbar><igc-columnfield="CustomerID"hidden="true"></igc-column><igc-columnfield="Company"header="Company Name"pinned="true"></igc-column><igc-columnfield="ContactName"header="Contact Name"></igc-column><igc-columnfield="ContactTitle"header="Contact Title"></igc-column><igc-columnfield="Address"header="Address"></igc-column><igc-columnfield="City"header="City"></igc-column><igc-columnfield="PostalCode"header="Postal Code"></igc-column><igc-columnfield="Country"header="Country"></igc-column><igc-columnfield="Phone"></igc-column><igc-columnfield="Fax"></igc-column><igc-row-islandchild-data-key="Orders"auto-generate="false"><igc-columnfield="OrderDate"header="Order Date"data-type="date"resizable="true"></igc-column><igc-columnfield="RequiredDate"header="Required Date"data-type="date"resizable="true"></igc-column><igc-columnfield="ShippedDate"header="Shipped Date"data-type="date"resizable="true"></igc-column><igc-columnfield="ShipName"header="Ship Name"data-type="string"resizable="true"pinned="true"></igc-column><igc-columnfield="ShippedVia"header="Shipped Via"data-type="string"resizable="true"></igc-column><igc-columnfield="Freight"header="Freight"data-type="string"resizable="true"></igc-column><igc-row-islandchild-data-key="OrderDetails"auto-generate="false"><igc-columnfield="UnitPrice"header="Unit Price"data-type="string"resizable="true"></igc-column><igc-columnfield="Quantity"header="Quantity"data-type="string"resizable="true"></igc-column><igc-columnfield="Discount"header="Discount"data-type="string"resizable="true"></igc-column><igc-columnfield="Weight"header="Weight"data-type="string"resizable="true"></igc-column><igc-columnfield="Length"header="Length"data-type="string"resizable="true"></igc-column><igc-columnfield="TotalPrice"header="Total Price"data-type="string"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.
API de fijación de columnas
El anclaje de columnas se controla a través de la pinned propiedad de the IgcColumnComponent. Las columnas ancladas se representan en el lado izquierdo de la IgcHierarchicalGridComponent forma predeterminada y permanecen fijas a través del desplazamiento horizontal de las columnas no ancladas en el IgcHierarchicalGridComponent cuerpo.
Ambos métodos devuelven un valor booleano que indica si su operación respectiva fue exitosa o no. Generalmente la razón por la que fallan es que la columna ya se encuentra en el estado deseado.
Una columna está fijada a la derecha de la columna fijada más a la derecha. Se puede cambiar el orden de las columnas fijadas suscribiéndose al evento ColumnPin y cambiando la propiedad InsertAtIndex de los argumentos del evento al índice de posición deseado.
Puede cambiar la posición de fijación de la columna mediante la opción de configuración pinning. Le permite establecer la posición de las columnas en Inicio o Fin. Cuando se establece en Fin, las columnas se representan al final de la cuadrícula, después de las columnas sin fijar. Las columnas no fijadas se pueden desplazar horizontalmente, mientras que las columnas fijadas permanecen fijas a 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 ig-typography"><divclass="container fill"><igc-hierarchical-gridname="grid"id="grid"id="grid"column-selection="single"primary-key="CustomerID"><igc-grid-toolbar
><igc-grid-toolbar-actions
><igc-grid-toolbar-pinning
></igc-grid-toolbar-pinning></igc-grid-toolbar-actions></igc-grid-toolbar><igc-columnfield="CustomerID"hidden="true"></igc-column><igc-columnfield="Company"header="Company Name"pinned="true"></igc-column><igc-columnfield="ContactName"header="Contact Name"></igc-column><igc-columnfield="ContactTitle"header="Contact Title"></igc-column><igc-columnfield="Address"header="Address"></igc-column><igc-columnfield="City"header="City"></igc-column><igc-columnfield="PostalCode"header="Postal Code"></igc-column><igc-columnfield="Country"header="Country"></igc-column><igc-columnfield="Phone"></igc-column><igc-columnfield="Fax"></igc-column><igc-row-islandchild-data-key="Orders"auto-generate="false"><igc-columnfield="OrderDate"header="Order Date"data-type="date"resizable="true"></igc-column><igc-columnfield="RequiredDate"header="Required Date"data-type="date"resizable="true"></igc-column><igc-columnfield="ShippedDate"header="Shipped Date"data-type="date"resizable="true"></igc-column><igc-columnfield="ShipName"header="Ship Name"data-type="string"resizable="true"pinned="true"></igc-column><igc-columnfield="ShippedVia"header="Shipped Via"data-type="string"resizable="true"></igc-column><igc-columnfield="Freight"header="Freight"data-type="string"resizable="true"></igc-column><igc-row-islandchild-data-key="OrderDetails"auto-generate="false"><igc-columnfield="UnitPrice"header="Unit Price"data-type="string"resizable="true"></igc-column><igc-columnfield="Quantity"header="Quantity"data-type="string"resizable="true"></igc-column><igc-columnfield="Discount"header="Discount"data-type="string"resizable="true"></igc-column><igc-columnfield="Weight"header="Weight"data-type="string"resizable="true"></igc-column><igc-columnfield="Length"header="Length"data-type="string"resizable="true"></igc-column><igc-columnfield="TotalPrice"header="Total Price"data-type="string"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
IU de fijación de columnas personalizada
Puede definir su interfaz de usuario personalizada y cambiar el estado del pin de las columnas a través de la API relacionada.
Digamos que en lugar de una barra de herramientas le gustaría definir íconos de pin en los encabezados de las columnas en los que el usuario final puede hacer clic para cambiar el estado del pin de la columna en particular.
Esto se puede hacer creando una plantilla de encabezado para las columnas con un ícono personalizado.
import'igniteui-webcomponents-grids/grids/combined';
import { IgcHierarchicalGridComponent, IgcColumnComponent } from'igniteui-webcomponents-grids/grids';
import HierarchicalCustomersData from'./HierarchicalCustomersData.json';
import { IgcColumnTemplateContext } 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 grid: IgcHierarchicalGridComponent
private column1: IgcColumnComponent
private column2: IgcColumnComponent
private column3: IgcColumnComponent
private column4: IgcColumnComponent
private column5: IgcColumnComponent
private column6: IgcColumnComponent
private column7: IgcColumnComponent
private column8: IgcColumnComponent
private column9: IgcColumnComponent
private column10: IgcColumnComponent
private column11: IgcColumnComponent
private column12: IgcColumnComponent
private column13: IgcColumnComponent
private column14: IgcColumnComponent
private column15: IgcColumnComponent
private column16: IgcColumnComponent
private column17: IgcColumnComponent
private column18: IgcColumnComponent
private column19: IgcColumnComponent
private column20: IgcColumnComponent
private column21: IgcColumnComponent
private _bind: () =>void;
constructor() {
var grid = this.grid = document.getElementById('grid') as IgcHierarchicalGridComponent;
var column1 = this.column1 = document.getElementById('column1') as IgcColumnComponent;
var column2 = this.column2 = document.getElementById('column2') as IgcColumnComponent;
var column3 = this.column3 = document.getElementById('column3') as IgcColumnComponent;
var column4 = this.column4 = document.getElementById('column4') as IgcColumnComponent;
var column5 = this.column5 = document.getElementById('column5') as IgcColumnComponent;
var column6 = this.column6 = document.getElementById('column6') as IgcColumnComponent;
var column7 = this.column7 = document.getElementById('column7') as IgcColumnComponent;
var column8 = this.column8 = document.getElementById('column8') as IgcColumnComponent;
var column9 = this.column9 = document.getElementById('column9') as IgcColumnComponent;
var column10 = this.column10 = document.getElementById('column10') as IgcColumnComponent;
var column11 = this.column11 = document.getElementById('column11') as IgcColumnComponent;
var column12 = this.column12 = document.getElementById('column12') as IgcColumnComponent;
var column13 = this.column13 = document.getElementById('column13') as IgcColumnComponent;
var column14 = this.column14 = document.getElementById('column14') as IgcColumnComponent;
var column15 = this.column15 = document.getElementById('column15') as IgcColumnComponent;
var column16 = this.column16 = document.getElementById('column16') as IgcColumnComponent;
var column17 = this.column17 = document.getElementById('column17') as IgcColumnComponent;
var column18 = this.column18 = document.getElementById('column18') as IgcColumnComponent;
var column19 = this.column19 = document.getElementById('column19') as IgcColumnComponent;
var column20 = this.column20 = document.getElementById('column20') as IgcColumnComponent;
var column21 = this.column21 = document.getElementById('column21') as IgcColumnComponent;
this._bind = () => {
grid.data = this.hierarchicalCustomersData;
column1.headerTemplate = this.hierarchicalGridPinHeaderTemplate;
column2.headerTemplate = this.hierarchicalGridPinHeaderTemplate;
column3.headerTemplate = this.hierarchicalGridPinHeaderTemplate;
column4.headerTemplate = this.hierarchicalGridPinHeaderTemplate;
column5.headerTemplate = this.hierarchicalGridPinHeaderTemplate;
column6.headerTemplate = this.hierarchicalGridPinHeaderTemplate;
column7.headerTemplate = this.hierarchicalGridPinHeaderTemplate;
column8.headerTemplate = this.hierarchicalGridPinHeaderTemplate;
column9.headerTemplate = this.hierarchicalGridPinHeaderTemplate;
column10.headerTemplate = this.hierarchicalGridPinHeaderTemplate;
column11.headerTemplate = this.hierarchicalGridPinHeaderTemplate;
column12.headerTemplate = this.hierarchicalGridPinHeaderTemplate;
column13.headerTemplate = this.hierarchicalGridPinHeaderTemplate;
column14.headerTemplate = this.hierarchicalGridPinHeaderTemplate;
column15.headerTemplate = this.hierarchicalGridPinHeaderTemplate;
column16.headerTemplate = this.hierarchicalGridPinHeaderTemplate;
column17.headerTemplate = this.hierarchicalGridPinHeaderTemplate;
column18.headerTemplate = this.hierarchicalGridPinHeaderTemplate;
column19.headerTemplate = this.hierarchicalGridPinHeaderTemplate;
column20.headerTemplate = this.hierarchicalGridPinHeaderTemplate;
column21.headerTemplate = this.hierarchicalGridPinHeaderTemplate;
}
this._bind();
}
private _hierarchicalCustomersData: any[] = HierarchicalCustomersData;
publicgethierarchicalCustomersData(): any[] {
returnthis._hierarchicalCustomersData;
}
public hierarchicalGridPinHeaderTemplate = (ctx: IgcColumnTemplateContext) => {
const column = (ctx asany).column;
return html`<div><spanstyle="float:left">${column.field}</span><spanstyle="float:right" @pointerdown=${(e: any) => this.toggleColumnPin(column)}>📌</span></div>`;
};
publictoggleColumnPin(field: IgcColumnComponent) {
if(field) {
field.pinned = !field.pinned;
}
}
}
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-gridname="grid"id="grid"id="grid"column-selection="single"primary-key="CustomerID"><igc-grid-toolbar
><igc-grid-toolbar-actions
><igc-grid-toolbar-pinning
></igc-grid-toolbar-pinning></igc-grid-toolbar-actions></igc-grid-toolbar><igc-columnfield="CustomerID"hidden="true"></igc-column><igc-columnfield="Company"header="Company Name"pinned="true"name="column1"id="column1"></igc-column><igc-columnfield="ContactName"header="Contact Name"name="column2"id="column2"></igc-column><igc-columnfield="ContactTitle"header="Contact Title"name="column3"id="column3"></igc-column><igc-columnfield="Address"header="Address"name="column4"id="column4"></igc-column><igc-columnfield="City"header="City"name="column5"id="column5"></igc-column><igc-columnfield="PostalCode"header="Postal Code"name="column6"id="column6"></igc-column><igc-columnfield="Country"header="Country"name="column7"id="column7"></igc-column><igc-columnfield="Phone"name="column8"id="column8"></igc-column><igc-columnfield="Fax"name="column9"id="column9"></igc-column><igc-row-islandchild-data-key="Orders"auto-generate="false"><igc-columnfield="OrderDate"header="Order Date"data-type="date"resizable="true"name="column10"id="column10"></igc-column><igc-columnfield="RequiredDate"header="Required Date"data-type="date"resizable="true"name="column11"id="column11"></igc-column><igc-columnfield="ShippedDate"header="Shipped Date"data-type="date"resizable="true"name="column12"id="column12"></igc-column><igc-columnfield="ShipName"header="Ship Name"data-type="string"resizable="true"pinned="true"name="column13"id="column13"></igc-column><igc-columnfield="ShippedVia"header="Shipped Via"data-type="string"resizable="true"name="column14"id="column14"></igc-column><igc-columnfield="Freight"header="Freight"data-type="string"resizable="true"name="column15"id="column15"></igc-column><igc-row-islandchild-data-key="OrderDetails"auto-generate="false"><igc-columnfield="UnitPrice"header="Unit Price"data-type="string"resizable="true"name="column16"id="column16"></igc-column><igc-columnfield="Quantity"header="Quantity"data-type="string"resizable="true"name="column17"id="column17"></igc-column><igc-columnfield="Discount"header="Discount"data-type="string"resizable="true"name="column18"id="column18"></igc-column><igc-columnfield="Weight"header="Weight"data-type="string"resizable="true"name="column19"id="column19"></igc-column><igc-columnfield="Length"header="Length"data-type="string"resizable="true"name="column20"id="column20"></igc-column><igc-columnfield="TotalPrice"header="Total Price"data-type="string"resizable="true"name="column21"id="column21"></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
Limitaciones de fijación
Establecer los anchos de columna en porcentaje (%) hace que el cuerpo y el contenido del IgcHierarchicalGridComponent encabezado estén explícitamente desalineados cuando hay columnas ancladas. Para que el anclaje de columnas funcione correctamente, los anchos de las columnas deben estar en píxeles (px) o ser asignados automáticamente por el IgcHierarchicalGridComponent.
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 ID para la cuadrícula: