Interacciones del portapapeles de la cuadrícula de árbol Angular
Las operaciones de copia al portapapeles ahora están disponibles en la cuadrícula de árbol. Esta funcionalidad proporciona una forma rápida, fácil y personalizable de copiar datos de la cuadrícula de datos Angular 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 la cuadrícula de árbol a Excel u otros programas externos.
最速で機能豊富な Angular Data Grid は、ページング、ソート、フィルタリング、グループ化、PDF および Excel へのエクスポートなどの機能を提供します。究極のアプリ構築エクスペリエンスとデータ操作に必要なすべてが揃っています。
<divclass="wrapper theme"><divclass="sample-content"><divclass="sample-column"><igx-input-grouptype="box"><labeligxLabel>Change copy separator</label><inputtype="text"igxInput [(ngModel)]="options.separator" /><igx-suffix (pointerup)="options.separator = '\t'"><igx-icon>clear</igx-icon></igx-suffix><igx-hint>
The default value is a single tabulation which is shown as whitespace above.
Click the clear icon to reset it back to tabulation.
</igx-hint></igx-input-group><divclass="grid-wrapper"><igx-tree-grid [igxPreventDocumentScroll]="true" #grid1 [data]="data"childDataKey="Employees" (columnInit)="initColumn($event)"
[autoGenerate]="false" [clipboardOptions]="options"><igx-grid-toolbar><divclass="tlb"><igx-switch [(ngModel)]="options.enabled">Grid copy behavior</igx-switch><igx-switch [(ngModel)]="options.copyHeaders">Copying of header labels</igx-switch><igx-switch [(ngModel)]="options.copyFormatters">Copying column formatters</igx-switch><buttonigxButton="outlined"igxRipple [igxRippleCentered]="true" (click)="grid1.clearCellSelection()"><igx-iconfamily="material">clear</igx-icon><span>Selection</span></button></div></igx-grid-toolbar><igx-columnfield="ID"></igx-column><igx-columnfield="HireDate"dataType="date"></igx-column><igx-columnfield="Age"dataType="number" ></igx-column><igx-columnfield="Name"dataType="string"></igx-column></igx-tree-grid></div><divstyle="margin-top: 0.5rem"><igx-input-grouptype="box"><labeligxLabel>Paste your data here (or in Excel)</label><textareaigxInputcols="30"rows="5"></textarea></igx-input-group></div></div></div></div>html
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular 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 copy celdas en IE 11, puede utilizar la selección del teclado. Mantenga presionada la shift key 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 copy desde la cuadrícula. Más adelante planeamos exponer el comportamiento paste dentro de la cuadrícula.
Uso de API
Exponemos la propiedad clipboardOptions @Input, 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 las clipboardOptions