Descripción general del portapapeles React Tree Grid
Las operaciones de copia al portapapeles ahora están disponibles en IgrTreeGrid
. Esta funcionalidad proporciona una forma rápida, fácil y personalizable de copiar datos de React IgrTreeGrid
a través de la selección de datos de múltiples celdas actual. El comportamiento del Portapapeles del sistema le brinda al usuario la capacidad de copiar datos de IgrTreeGrid
a Excel u otros programas externos.
Ejemplo de portapapeles de cuadrícula de árbol React
export class EmployeesFlatDetailsItem {
public constructor(init: Partial<EmployeesFlatDetailsItem>) {
Object.assign(this, init);
}
public Address: string;
public Age: number;
public City: string;
public Country: string;
public Fax: string;
public HireDate: string;
public ID: number;
public Name: string;
public ParentID: number;
public Phone: string;
public PostalCode: number;
public Title: string;
public LastName: string;
public FullAddress: string;
}
export class EmployeesFlatDetails extends Array<EmployeesFlatDetailsItem> {
public constructor(items: Array<EmployeesFlatDetailsItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new EmployeesFlatDetailsItem(
{
Address: `Obere Str. 57`,
Age: 55,
City: `Berlin`,
Country: `Germany`,
Fax: `030-0076545`,
HireDate: `2008-03-20`,
ID: 1,
Name: `Johnathan Winchester`,
ParentID: -1,
Phone: `030-0074321`,
PostalCode: 12209,
Title: `Development Manager`,
LastName: `Winchester`,
FullAddress: `Obere Str. 57, Berlin, Germany`
}),
new EmployeesFlatDetailsItem(
{
Address: `Avda. de la Constitución 2222`,
Age: 42,
City: `México D.F.`,
Country: `Mexico`,
Fax: `(5) 555-3745`,
HireDate: `2014-01-22`,
ID: 4,
Name: `Ana Sanders`,
ParentID: -1,
Phone: `(5) 555-4729`,
PostalCode: 5021,
Title: `CEO`,
LastName: `Sanders`,
FullAddress: `Avda. de la Constitución 2222, México D.F., Mexico`
}),
new EmployeesFlatDetailsItem(
{
Address: `Mataderos 2312`,
Age: 49,
City: `México D.F.`,
Country: `Mexico`,
Fax: `(5) 555-3995`,
HireDate: `2014-01-22`,
ID: 18,
Name: `Victoria Lincoln`,
ParentID: -1,
Phone: `(5) 555-3932`,
PostalCode: 5023,
Title: `Accounting Manager`,
LastName: `Lincoln`,
FullAddress: `Mataderos 2312, México D.F., Mexico`
}),
new EmployeesFlatDetailsItem(
{
Address: `120 Hanover Sq.`,
Age: 61,
City: `London`,
Country: `UK`,
Fax: `(171) 555-6750`,
HireDate: `2010-01-01`,
ID: 10,
Name: `Yang Wang`,
ParentID: -1,
Phone: `(171) 555-7788`,
PostalCode: 39000,
Title: `Localization Manager`,
LastName: `Wang`,
FullAddress: `120 Hanover Sq., London, UK`
}),
new EmployeesFlatDetailsItem(
{
Address: `Berguvsvägen 8`,
Age: 43,
City: `Luleå`,
Country: `Sweden`,
Fax: `0921-12 34 67`,
HireDate: `2011-06-03`,
ID: 3,
Name: `Michael Burke`,
ParentID: 1,
Phone: `0921-12 34 65`,
PostalCode: 29000,
Title: `Senior Software Developer`,
LastName: `Burke`,
FullAddress: `Berguvsvägen 8, Luleå, Sweden`
}),
new EmployeesFlatDetailsItem(
{
Address: `Forsterstr. 57`,
Age: 29,
City: `Mannheim`,
Country: `Germany`,
Fax: `0621-08924`,
HireDate: `2009-06-19`,
ID: 2,
Name: `Thomas Anderson`,
ParentID: 1,
Phone: `0621-08460`,
PostalCode: 68306,
Title: `Senior Software Developer`,
LastName: `Anderson`,
FullAddress: `Forsterstr. 57, Mannheim, Germany`
}),
new EmployeesFlatDetailsItem(
{
Address: `24, place Kléber`,
Age: 31,
City: `Strasbourg`,
Country: `France`,
Fax: `88.60.15.32`,
HireDate: `2014-08-18`,
ID: 11,
Name: `Monica Reyes`,
ParentID: 1,
Phone: `88.60.15.31`,
PostalCode: 67000,
Title: `Software Development Team Lead`,
LastName: `Reyes`,
FullAddress: `24, place Kléber, Strasbourg, France`
}),
new EmployeesFlatDetailsItem(
{
Address: `C/ Araquil, 67`,
Age: 35,
City: `Madrid`,
Country: `Spain`,
Fax: `(91) 555 91 99`,
HireDate: `2015-09-17`,
ID: 6,
Name: `Roland Mendel`,
ParentID: 11,
Phone: `(91) 555 22 82`,
PostalCode: 28023,
Title: `Senior Software Developer`,
LastName: `Mendel`,
FullAddress: `C/ Araquil, 67, Madrid, Spain`
}),
new EmployeesFlatDetailsItem(
{
Address: `12, rue des Bouchers`,
Age: 44,
City: `Marseille`,
Country: `France`,
Fax: `91.24.45.41`,
HireDate: `2009-10-11`,
ID: 12,
Name: `Sven Cooper`,
ParentID: 11,
Phone: `91.24.45.40`,
PostalCode: 13008,
Title: `Senior Software Developer`,
LastName: `Cooper`,
FullAddress: `12, rue des Bouchers, Marseille, France`
}),
new EmployeesFlatDetailsItem(
{
Address: `23 Tsawassen Blvd.`,
Age: 44,
City: `Tsawassen`,
Country: `Canada`,
Fax: `(604) 555-3745`,
HireDate: `2014-04-04`,
ID: 14,
Name: `Laurence Johnson`,
ParentID: 4,
Phone: `(604) 555-4729`,
PostalCode: 19000,
Title: `Director`,
LastName: `Johnson`,
FullAddress: `23 Tsawassen Blvd., Tsawassen, Canada`
}),
new EmployeesFlatDetailsItem(
{
Address: `Fauntleroy Circus`,
Age: 25,
City: `London`,
Country: `UK`,
Fax: `(5) 555-3798`,
HireDate: `2017-11-9`,
ID: 5,
Name: `Elizabeth Richards`,
ParentID: 4,
Phone: `(171) 555-1212`,
PostalCode: 30000,
Title: `Vice President`,
LastName: `Richards`,
FullAddress: `Fauntleroy Circus, London, UK`
}),
new EmployeesFlatDetailsItem(
{
Address: `Cerrito 333`,
Age: 39,
City: `Buenos Aires`,
Country: `Argentina`,
Fax: `(1) 135-4892`,
HireDate: `2010-03-22`,
ID: 13,
Name: `Trevor Ashworth`,
ParentID: 5,
Phone: `(1) 135-5555`,
PostalCode: 1010,
Title: `Director`,
LastName: `Ashworth`,
FullAddress: `Cerrito 333, Buenos Aires, Argentina`
}),
new EmployeesFlatDetailsItem(
{
Address: `Sierras de Granada 9993`,
Age: 44,
City: `México D.F.`,
Country: `Mexico`,
Fax: `(5) 555-7293`,
HireDate: `2014-04-04`,
ID: 17,
Name: `Antonio Moreno`,
ParentID: 18,
Phone: `(5) 555-3392`,
PostalCode: 5022,
Title: `Senior Accountant`,
LastName: `Moreno`,
FullAddress: `Sierras de Granada 9993, México D.F., Mexico`
}),
new EmployeesFlatDetailsItem(
{
Address: `Hauptstr. 29`,
Age: 50,
City: `Sao Paulo`,
Country: `Brazil`,
Fax: `(5) 555-6691`,
HireDate: `2007-11-18`,
ID: 7,
Name: `Pedro Rodriguez`,
ParentID: 10,
Phone: `0452-076545`,
PostalCode: 3012,
Title: `Senior Localization Developer`,
LastName: `Rodriguez`,
FullAddress: `Hauptstr. 29, Sao Paulo, Brazil`
}),
new EmployeesFlatDetailsItem(
{
Address: `Av. dos Lusíadas, 23`,
Age: 27,
City: `Bern`,
Country: `Switzerland`,
Fax: ``,
HireDate: `2016-02-19`,
ID: 8,
Name: `Casey Harper`,
ParentID: 10,
Phone: `(11) 555-7647`,
PostalCode: 40000,
Title: `Senior Localization`,
LastName: `Harper`,
FullAddress: `Av. dos Lusíadas, 23, Bern, Switzerland`
}),
new EmployeesFlatDetailsItem(
{
Address: `Berkeley Gardens 12`,
Age: 25,
City: `London`,
Country: `UK`,
Fax: `(171) 555-9199`,
HireDate: `2017-11-09`,
ID: 15,
Name: `Patricia Simpson`,
ParentID: 7,
Phone: `(171) 555-2282`,
PostalCode: 26000,
Title: `Localization Intern`,
LastName: `Simpson`,
FullAddress: `Berkeley Gardens 12, London, UK`
}),
new EmployeesFlatDetailsItem(
{
Address: `Walserweg 21`,
Age: 39,
City: `Aachen`,
Country: `Germany`,
Fax: `0241-059428`,
HireDate: `2010-03-22`,
ID: 9,
Name: `Francisco Chang`,
ParentID: 7,
Phone: `0241-039123`,
PostalCode: 52066,
Title: `Localization Intern`,
LastName: `Chang`,
FullAddress: `Walserweg 21, Aachen, Germany`
}),
new EmployeesFlatDetailsItem(
{
Address: `35 King George`,
Age: 25,
City: `London`,
Country: `UK`,
Fax: `(171) 555-3373`,
HireDate: `2018-03-18`,
ID: 16,
Name: `Peter Lewis`,
ParentID: 7,
Phone: `(171) 555-0297`,
PostalCode: 48000,
Title: `Localization Intern`,
LastName: `Lewis`,
FullAddress: `35 King George, London, UK`
}),
];
super(...(newItems.slice(0, items)));
}
}
}
tsimport React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { GridSelectionMode, IgrColumnComponentEventArgs, IgrGridBaseDirective, IgrTreeGridModule } from "@infragistics/igniteui-react-grids";
import { IgrTreeGrid, IgrColumn } from "@infragistics/igniteui-react-grids";
import { EmployeesFlatDetails } from './EmployeesFlatDetails';
import "@infragistics/igniteui-react-grids/grids/combined";
import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css";
import { IgrInput, IgrSwitch, IgrButton } from "@infragistics/igniteui-react";
const mods: any[] = [
IgrTreeGridModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component<any, any> {
private defaultSeparator = " ";
private treeGrid: IgrTreeGrid;
private treeGridRef(r: IgrTreeGrid) {
this.treeGrid = r;
this.defaultSeparator = this.treeGrid.clipboardOptions.separator;
this.setState({});
}
constructor(props: any) {
super(props);
this.state = {
separator: '\t',
clipboardEnabled: true,
clipboardHeaders: true,
clipboardFormatters: true
};
this.treeGridRef = this.treeGridRef.bind(this);
this.handleSeparatorChange = this.handleSeparatorChange.bind(this);
this.handleClipboardEnabledChange = this.handleClipboardEnabledChange.bind(this);
this.handleClipboardHeadersChange = this.handleClipboardHeadersChange.bind(this);
this.handleClipboardFormattersChange = this.handleClipboardFormattersChange.bind(this);
this.handleClearSelection = this.handleClearSelection.bind(this);
}
public render(): JSX.Element {
return (
<div className="container sample ig-typography">
<div className="options horizontal" style={{ gap: '50px' }}>
<IgrInput
key="separatorInput"
value={this.state.separator}
change={this.handleSeparatorChange}
>
<span key="separatorPrefix" slot="prefix">Change copy separator:</span>
<span key="separatorHelperText" slot="helper-text">The default value is a single tabulation.</span>
</IgrInput>
<IgrSwitch
key="clipboardEnabledSwitch"
checked={this.state.clipboardEnabled}
labelPosition="before"
change={this.handleClipboardEnabledChange}
>
<span key="clipboardEnabledLabel">Grid copy behavior</span>
</IgrSwitch>
<IgrSwitch
key="clipboardHeadersSwitch"
checked={this.state.clipboardHeaders}
labelPosition="before"
change={this.handleClipboardHeadersChange}
>
<span key="clipboardHeadersLabel">Copying of header labels</span>
</IgrSwitch>
<IgrSwitch
key="clipboardFormattersSwitch"
checked={this.state.clipboardFormatters}
labelPosition="before"
change={this.handleClipboardFormattersChange}
>
<span key="clipboardFormattersLabel">Copying column formatters</span>
</IgrSwitch>
<IgrButton
key="clearSelectionButton"
clicked={this.handleClearSelection}
style={{ marginTop: '0.5rem' }}
>
<span key="clearSelectionLabel">Clear selection</span>
</IgrButton>
</div>
<div className="container fill">
<IgrTreeGrid
autoGenerate={false}
ref={this.treeGridRef}
id="treeGrid"
data={this.employeesFlatDetails}
primaryKey="ID"
foreignKey="ParentID"
columnSelection="Multiple"
clipboardOptions={{
enabled: this.state.clipboardEnabled,
copyHeaders: this.state.clipboardHeaders,
copyFormatters: this.state.clipboardFormatters,
separator: this.state.separator
}}
columnInit={this.webGridClipboardOperationsColumnInit}
>
<IgrColumn field="ID" header="ID" dataType="number" sortable />
<IgrColumn field="Name" dataType="string" sortable disableHiding />
<IgrColumn field="Title" dataType="string" sortable disableHiding />
<IgrColumn field="HireDate" dataType="date" sortable hidden />
<IgrColumn field="Age" dataType="number" sortable hidden />
<IgrColumn field="Address" dataType="string" sortable />
<IgrColumn field="City" dataType="string" sortable />
<IgrColumn field="Country" dataType="string" sortable />
<IgrColumn field="Fax" dataType="string" sortable />
<IgrColumn field="PostalCode" header="Postal Code" dataType="string" sortable />
<IgrColumn field="Phone" dataType="string" sortable />
</IgrTreeGrid>
</div>
</div>
);
}
private _employeesFlatDetails: EmployeesFlatDetails = null;
public get employeesFlatDetails(): EmployeesFlatDetails {
if (this._employeesFlatDetails == null)
{
this._employeesFlatDetails = new EmployeesFlatDetails();
}
return this._employeesFlatDetails;
}
private handleSeparatorChange(event: any) {
this.setState({ separator: event.value || this.defaultSeparator });
}
private handleClipboardEnabledChange(event: any) {
this.setState({ clipboardEnabled: event.checked });
}
private handleClipboardHeadersChange(event: any) {
this.setState({ clipboardHeaders: event.checked });
}
private handleClipboardFormattersChange(event: any) {
this.setState({ clipboardFormatters: event.checked });
}
private handleClearSelection() {
this.treeGrid.cellSelection = GridSelectionMode.None;
this.treeGrid.cellSelection = GridSelectionMode.Multiple;
}
private webGridClipboardOperationsColumnInit = (grid: IgrGridBaseDirective, args: IgrColumnComponentEventArgs) => {
let column = args.detail;
column.formatter = (val: any) => "** " + val + " **"
column.header = "🎉" + column.field;
}
}
// rendering the above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample />);
tsx/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas completo Ignite UI for React y comienza a crear tus 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 declipboardOptions
.
Recursos adicionales
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.