Reordenación y movimiento de columnas de cuadrícula jerárquica
La función de movimiento de columnas de cuadrícula jerárquica Web Components en Ignite UI for Web Components permite un reordenamiento rápido y sencillo de las columnas. Esto se puede hacer a través de la API de movimiento de columnas o arrastrando y soltando los encabezados a otra posición mediante el mouse o gestos táctiles. En la cuadrícula jerárquica Web Components, puede habilitar el movimiento de columnas para columnas ancladas y no ancladas, así como para encabezados de varias columnas.
Solo se permite reordenar 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. Se permite moverse entre columnas/grupos de columnas, si son columnas de nivel superior.
Si el encabezado de una columna tiene una plantilla y el movimiento de columnas está habilitado o la columna correspondiente es agrupable, entonces los elementos con plantilla deben tener el atributo arrastrable establecido en falso.
Si el área anclada supera su ancho máximo permitido (80% del ancho total de IgcHierarchicalGridComponent), una pista visual notifica al usuario final que la operación de colocación está prohibida y que el anclaje no es posible. Esto significa que no se le permitirá soltar una columna en el área anclada.
Web Components Ejemplo de descripción general de movimiento de columnas de cuadrícula jerárquica
EXAMPLE
TS
HTML
CSS
import'igniteui-webcomponents-grids/grids/combined';
import { IgcHierarchicalGridComponent, IgcPaginatorComponent, IgcColumnComponent } from'igniteui-webcomponents-grids/grids';
import HierarchicalCustomers from'./HierarchicalCustomers.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 hierarchicalGrid1: IgcHierarchicalGridComponent
private paginator: IgcPaginatorComponent
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 _bind: () =>void;
constructor() {
var hierarchicalGrid1 = this.hierarchicalGrid1 = document.getElementById('hierarchicalGrid1') as IgcHierarchicalGridComponent;
var paginator = this.paginator = document.getElementById('paginator') as IgcPaginatorComponent;
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;
this._bind = () => {
hierarchicalGrid1.data = this.hierarchicalCustomers;
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;
}
this._bind();
}
private _hierarchicalCustomers: any[] = HierarchicalCustomers;
publicgethierarchicalCustomers(): any[] {
returnthis._hierarchicalCustomers;
}
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-gridauto-generate="false"moving="true"name="hierarchicalGrid1"id="hierarchicalGrid1"><igc-paginatorname="paginator"id="paginator"per-page="15"></igc-paginator><igc-columnfield="CustomerID"data-type="string"name="column1"id="column1"></igc-column><igc-columnfield="Company"data-type="string"width="150px"name="column2"id="column2"></igc-column><igc-columnfield="ContactName"data-type="string"width="150px"name="column3"id="column3"></igc-column><igc-columnfield="ContactTitle"data-type="string"width="150px"name="column4"id="column4"></igc-column><igc-columnfield="Address"data-type="string"name="column5"id="column5"></igc-column><igc-columnfield="City"data-type="string"name="column6"id="column6"></igc-column><igc-columnfield="PostalCode"data-type="string"name="column7"id="column7"></igc-column><igc-columnfield="Country"data-type="string"name="column8"id="column8"></igc-column><igc-columnfield="Phone"data-type="string"name="column9"id="column9"></igc-column><igc-columnfield="Fax"data-type="string"name="column10"id="column10"></igc-column><igc-row-islandchild-data-key="Orders"auto-generate="false"moving="true"><igc-columnfield="OrderID"data-type="number"></igc-column><igc-columnfield="EmployeeID"data-type="number"></igc-column><igc-columnfield="OrderDate"data-type="date"></igc-column><igc-columnfield="RequiredDate"data-type="date"></igc-column><igc-columnfield="ShippedDate"data-type="date"></igc-column><igc-columnfield="ShipVia"data-type="number"></igc-column><igc-columnfield="Freight"data-type="number"></igc-column><igc-columnfield="ShipName"data-type="string"></igc-column><igc-columnfield="ShipAddress"data-type="string"></igc-column><igc-columnfield="ShipCity"data-type="string"></igc-column><igc-columnfield="ShipPostalCode"data-type="string"></igc-column><igc-columnfield="ShipCountry"data-type="string"></igc-column><igc-row-islandchild-data-key="OrderDetails"auto-generate="false"moving="true"><igc-columnfield="ProductID"data-type="number"></igc-column><igc-columnfield="UnitPrice"data-type="number"></igc-column><igc-columnfield="Quantity"data-type="number"></igc-column><igc-columnfield="Discount"data-type="number"></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.
Descripción general
La función de movimiento de columnas está habilitada en un nivel por cuadrícula, lo que significa que IgcHierarchicalGridComponent podría tener columnas móviles o inamovibles. Esto se hace a través de la moving entrada de la IgcHierarchicalGridComponent.
Además de la funcionalidad de arrastrar y soltar, la función Mover columnas también proporciona métodos API para permitir mover una columna/reordenar columnas mediante programación:
moveColumn: mueve una columna antes o después de otra columna (un objetivo). El primer parámetro es la columna que se va a mover y el segundo parámetro es la columna de destino. También acepta un tercer parámetro opcional Position (que representa un valor DropPosition), que determina si se coloca la columna antes o después de la columna de destino.
// Move the ID column after the Name columnconst idColumn = grid.getColumnByName("ID");
const nameColumn = grid.getColumnByName("Name");
grid.moveColumn(idColumn, nameColumn, DropPosition.AfterDropTarget);
typescript
move: mueve una columna a un índice visible específico. Si el parámetro de índice pasado no es válido (es negativo o excede el número de columnas), o si no se permite que la columna se mueva a este índice (si está dentro de otro grupo), no se realiza ninguna operación.
// Move the ID column at 3rd position.const idColumn = grid.getColumnByName("ID");
idColumn.move(3);
typescript
Tenga en cuenta que cuando se utiliza la función de movimiento de columnas, se emitirá el evento ColumnMovingEnd si la operación se realizó correctamente. También tenga en cuenta que, en comparación con la funcionalidad de arrastrar y soltar, el uso de la función de movimiento de columnas no requiere establecer la propiedad moving en verdadero.
Eventos
Hay varios eventos relacionados con el movimiento de la columna para proporcionar un medio para aprovechar las operaciones de arrastrar y soltar de las columnas. Estos son ColumnMovingStart, ColumnMoving y ColumnMovingEnd.
Puede suscribirse al evento de la ColumnMovingEnd IgcHierarchicalGridComponent para implementar alguna lógica personalizada cuando una columna se coloca en una nueva posición. Por ejemplo, puede cancelar la eliminación de la columna Categoría después de la columna Cambio en el año (%) en el siguiente fragmento de código.
<igc-hierarchical-gridid="dataGrid"auto-generate="false"moving="true"><igc-columnfield="Category"></igc-column><igc-columnfield="Change On Year(%)"data-type="Number" ></igc-column></igc-hierarchical-grid>html
constructor() {
var dataGrid = this.dataGrid = document.getElementById('dataGrid') as IgcHierarchicalGridComponent;
dataGrid.data = this.data;
dataGrid.addEventListener("columnMovingEnd", this.onColumnMovingEnd);
}
typescript
publiconColumnMovingEnd(event) {
if (event.detail.source.field === "Category" && event.detail.target.field === "Change On Year(%)") {
event.detail.cancel = true;
}
}
typescript
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:
import'igniteui-webcomponents-grids/grids/combined';
import { IgcHierarchicalGridComponent, IgcPaginatorComponent, IgcColumnComponent } from'igniteui-webcomponents-grids/grids';
import HierarchicalCustomers from'./HierarchicalCustomers.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 paginator: IgcPaginatorComponent
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 _bind: () =>void;
constructor() {
var grid = this.grid = document.getElementById('grid') as IgcHierarchicalGridComponent;
var paginator = this.paginator = document.getElementById('paginator') as IgcPaginatorComponent;
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;
this._bind = () => {
grid.data = this.hierarchicalCustomers;
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;
}
this._bind();
}
private _hierarchicalCustomers: any[] = HierarchicalCustomers;
publicgethierarchicalCustomers(): any[] {
returnthis._hierarchicalCustomers;
}
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-gridauto-generate="false"moving="true"name="grid"id="grid"id="grid"><igc-paginatorname="paginator"id="paginator"per-page="15"></igc-paginator><igc-columnfield="CustomerID"data-type="string"name="column1"id="column1"></igc-column><igc-columnfield="Company"data-type="string"width="150px"name="column2"id="column2"></igc-column><igc-columnfield="ContactName"data-type="string"width="150px"name="column3"id="column3"></igc-column><igc-columnfield="ContactTitle"data-type="string"width="150px"name="column4"id="column4"></igc-column><igc-columnfield="Address"data-type="string"name="column5"id="column5"></igc-column><igc-columnfield="City"data-type="string"name="column6"id="column6"></igc-column><igc-columnfield="PostalCode"data-type="string"name="column7"id="column7"></igc-column><igc-columnfield="Country"data-type="string"name="column8"id="column8"></igc-column><igc-columnfield="Phone"data-type="string"name="column9"id="column9"></igc-column><igc-columnfield="Fax"data-type="string"name="column10"id="column10"></igc-column><igc-row-islandchild-data-key="Orders"auto-generate="false"moving="true"><igc-columnfield="OrderID"data-type="number"></igc-column><igc-columnfield="EmployeeID"data-type="number"></igc-column><igc-columnfield="OrderDate"data-type="date"></igc-column><igc-columnfield="RequiredDate"data-type="date"></igc-column><igc-columnfield="ShippedDate"data-type="date"></igc-column><igc-columnfield="ShipVia"data-type="number"></igc-column><igc-columnfield="Freight"data-type="number"></igc-column><igc-columnfield="ShipName"data-type="string"></igc-column><igc-columnfield="ShipAddress"data-type="string"></igc-column><igc-columnfield="ShipCity"data-type="string"></igc-column><igc-columnfield="ShipPostalCode"data-type="string"></igc-column><igc-columnfield="ShipCountry"data-type="string"></igc-column><igc-row-islandchild-data-key="OrderDetails"auto-generate="false"moving="true"><igc-columnfield="ProductID"data-type="number"></igc-column><igc-columnfield="UnitPrice"data-type="number"></igc-column><igc-columnfield="Quantity"data-type="number"></igc-column><igc-columnfield="Discount"data-type="number"></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