Descripción general del portapapeles de cuadrícula de árbol de Web Components
Las operaciones de copia en el portapapeles ahora están disponibles en el IgcTreeGridComponent. Esta funcionalidad proporciona una forma rápida, fácil y personalizable de copiar datos del Web Components IgcTreeGridComponent a través de la selección de datos de celda múltiple actual. El comportamiento del Portapapeles del sistema ofrece al usuario la capacidad de copiar datos desde Excel IgcTreeGridComponent u otros programas externos.
Ejemplo de portapapeles de cuadrícula de árbol de Web Components
import'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebTreeGridDescriptionModule } from'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from'igniteui-webcomponents-layouts';
import { IgcTreeGridComponent } from'igniteui-webcomponents-grids/grids';
import { EmployeesFlatDetailsItem, EmployeesFlatDetails } from'./EmployeesFlatDetails';
import { IgcGridComponent } from'igniteui-webcomponents-grids/grids';
import"igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents, IgcButtonComponent, IgcInputComponent, IgcSwitchComponent } from'igniteui-webcomponents';
defineAllComponents();
exportclassSample{
private clipboardEnabledEditor: IgcPropertyEditorPropertyDescriptionComponent
private clipboardHeadersEditor: IgcPropertyEditorPropertyDescriptionComponent
private clipboardFormattersEditor: IgcPropertyEditorPropertyDescriptionComponent
private treeGrid: IgcTreeGridComponent
private defaultSeparator: string;
constructor() {
var clipboardEnabledEditor = this.clipboardEnabledEditor = document.getElementById('ClipboardEnabledEditor') as IgcPropertyEditorPropertyDescriptionComponent;
var clipboardHeadersEditor = this.clipboardHeadersEditor = document.getElementById('ClipboardHeadersEditor') as IgcPropertyEditorPropertyDescriptionComponent;
var clipboardFormattersEditor = this.clipboardFormattersEditor = document.getElementById('ClipboardFormattersEditor') as IgcPropertyEditorPropertyDescriptionComponent;
this.webGridClearSelection = this.webGridClearSelection.bind(this);
var grid = this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
this.webGridClipboardOperationsColumnInit = this.webGridClipboardOperationsColumnInit.bind(this);
grid.data = this.employeesFlatDetails;
grid.addEventListener("columnInit", this.webGridClipboardOperationsColumnInit);
var copyBehaviorSwitch = document.getElementById("copy") as IgcSwitchComponent;
copyBehaviorSwitch.addEventListener("igcChange", (ev: CustomEvent) => {
grid.clipboardOptions.enabled = ev.detail.checked;
});
var copyHeaderSwitch = document.getElementById("headerCopy") as IgcSwitchComponent;
copyHeaderSwitch.addEventListener("igcChange", (ev: CustomEvent) => {
grid.clipboardOptions.copyHeaders = ev.detail.checked;
});
var formatterSwitch = document.getElementById("formatterCopy") as IgcSwitchComponent;
formatterSwitch.addEventListener("igcChange", (ev: CustomEvent) => {
grid.clipboardOptions.copyFormatters = ev.detail.checked;
});
var selectionClearBtn = document.getElementById("selectionClear") as IgcButtonComponent;
selectionClearBtn.addEventListener('click', (ev: any) => {
grid.cellSelection = 'none';
grid.cellSelection = 'multiple';
});
var input = document.getElementById("input") as IgcInputComponent;
input.addEventListener("igcChange", (ev: CustomEvent) => {
if (!this.defaultSeparator) {
this.defaultSeparator = grid.clipboardOptions.separator;
}
grid.clipboardOptions.separator = ev.detail || this.defaultSeparator;
});
}
private _employeesFlatDetails: EmployeesFlatDetails = null;
publicgetemployeesFlatDetails(): EmployeesFlatDetails {
if (this._employeesFlatDetails == null)
{
this._employeesFlatDetails = new EmployeesFlatDetails();
}
returnthis._employeesFlatDetails;
}
public webGridClearSelection(args: any): void {
console.log("TODO" + args);
//TODO
}
public webGridClipboardOperationsColumnInit(args: any): void {
let column = args.detail;
column.formatter = (e: any) => { return"** " + e + " **" };
column.header = "🎉" + column.field;
}
}
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"><divclass="options horizontal"style="gap: 50px;"><igc-inputid="input"><spanslot="prefix">Change copy separator:</span><spanslot="helper-text">The default value is a single tabulation.</span></igc-input><igc-switchid="copy"label-position="before"checked>Grid copy behavior</igc-switch><igc-switchid="headerCopy"label-position="before"checked>Copying of header labels</igc-switch><igc-switchid="formatterCopy"label-position="before"checked>Copying column formatters</igc-switch><igc-buttonid="selectionClear">Clear selection</igc-button></div><divclass="container fill"><igc-tree-gridauto-generate="false"name="treeGrid"id="treeGrid"id="treeGrid"primary-key="ID"foreign-key="ParentID"><igc-columnfield="ID"data-type="number"sortable="true"></igc-column><igc-columnfield="Name"data-type="string"sortable="true"disable-hiding="true"></igc-column><igc-columnfield="Title"data-type="string"sortable="true"disable-hiding="true"></igc-column><igc-columnfield="HireDate"data-type="date"sortable="true"hidden="true"></igc-column><igc-columnfield="Age"data-type="number"sortable="true"hidden="true"></igc-column><igc-columnfield="Address"data-type="string"sortable="true"></igc-column><igc-columnfield="City"data-type="string"sortable="true"></igc-column><igc-columnfield="Country"data-type="string"sortable="true"></igc-column><igc-columnfield="Fax"data-type="string"sortable="true"></igc-column><igc-columnfield="PostalCode"header="Postal Code"data-type="string"sortable="true"></igc-column><igc-columnfield="Phone"data-type="string"sortable="true"></igc-column></igc-tree-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.
Funcionalidad
El comportamiento de copia funciona con la interacción predeterminada definida por el navegador y el sistema operativo. Así, para los comportamientos de copiar y pegar, estos son:
Basado en Windows/Unix
Ctrl + C / Ctrl + Ins como atajo de teclado
Ctrl + V / Shift + Ins como atajo de teclado
Copiar acción a través del menú del navegador.
Mac OS
⌘ Cmd + C como atajo de teclado
⌘ Cmd + V como atajo de teclado
Copiar acción a través del menú del navegador.
Limitaciones
Tanto los eventos de corte como los de copia no son compatibles de forma nativa con Internet Explorer. La excepción es el evento de pegado (IE 11), que se emite pero no expone la propiedad ClipboardData en el evento.
Para copiar celdas en IE 11, puede utilizar la selección del teclado. Mantenga presionada la tecla Mayús para realizar una selección de varias celdas, presione Ctrl + C para copiar.
El comportamiento de copia está deshabilitado mientras la cuadrícula está en modo de edición.
La versión actual de esta función cubre solo el comportamiento de copia desde la cuadrícula. Más adelante planeamos exponer el comportamiento paste dentro de la cuadrícula.
Uso de API
Exponemos la propiedad clipboardOptions, que maneja las siguientes opciones:
Enabled Habilita/deshabilita la copia de celdas seleccionadas.
CopyHeaders Incluye los encabezados asociados al copiar.
CopyFormatters Aplique cualquier formateador de columna existente a los datos copiados.
Separator El separador de cadena que se utilizará para formatear los datos en el portapapeles. El valor predeterminado es /t
Excel puede detectar automáticamente texto separado por tabulaciones (delimitado por tabulaciones /t) y pegar correctamente los datos en columnas separadas. Cuando el formato de pegado no funciona y todo lo que pega aparece en una sola columna, entonces el delimitador de Excel está configurado en otro carácter o su texto usa espacios en lugar de tabulaciones.
GridCopy Se emite cuando se ejecuta una operación de copia. Se activa solo si el comportamiento de copia está habilitado a través de clipboardOptions.
Recursos adicionales
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.