React Grid 클립보드 개요
이제 IgrGrid에서 클립보드에 복사 작업을 사용할 수 있습니다. 이 기능은 현재 다중 셀 데이터 선택을 통해 React IgrGrid의 데이터를 복사하는 빠르고 쉽고 사용자 정의 가능한 방법을 제공합니다. 시스템 클립보드 동작은 사용자가 IgrGrid에서 Excel이나 다른 외부 프로그램으로 데이터를 복사할 수 있는 기능을 제공합니다.
React Grid 클립보드 예제
export class NwindDataItem {
public constructor(init: Partial<NwindDataItem>) {
Object.assign(this, init);
}
public ProductID: number;
public ProductName: string;
public SupplierID: number;
public CategoryID: number;
public QuantityPerUnit: string;
public UnitPrice: number;
public UnitsInStock: number;
public UnitsOnOrder: number;
public ReorderLevel: number;
public Discontinued: boolean;
public OrderDate: string;
public Rating: number;
public Locations: NwindDataItem_LocationsItem[];
}
export class NwindDataItem_LocationsItem {
public constructor(init: Partial<NwindDataItem_LocationsItem>) {
Object.assign(this, init);
}
public Shop: string;
public LastInventory: string;
}
export class NwindData extends Array<NwindDataItem> {
public constructor() {
super();
this.push(new NwindDataItem(
{
ProductID: 1,
ProductName: `Chai`,
SupplierID: 1,
CategoryID: 1,
QuantityPerUnit: `10 boxes x 20 bags`,
UnitPrice: 18,
UnitsInStock: 39,
UnitsOnOrder: 30,
ReorderLevel: 10,
Discontinued: false,
OrderDate: `2012-02-12`,
Rating: 5,
Locations: [
new NwindDataItem_LocationsItem(
{
Shop: `Fun-Tasty Co.`,
LastInventory: `06/12/2018`
}),
new NwindDataItem_LocationsItem(
{
Shop: `Farmer Market`,
LastInventory: `04/04/2018`
})]
}));
this.push(new NwindDataItem(
{
ProductID: 2,
ProductName: `Chang`,
SupplierID: 1,
CategoryID: 1,
QuantityPerUnit: `24 - 12 oz bottles`,
UnitPrice: 19,
UnitsInStock: 17,
UnitsOnOrder: 40,
ReorderLevel: 25,
Discontinued: true,
OrderDate: `2003-03-17`,
Rating: 5,
Locations: [
new NwindDataItem_LocationsItem(
{
Shop: `Super Market`,
LastInventory: `09/09/2018`
})]
}));
this.push(new NwindDataItem(
{
ProductID: 3,
ProductName: `Aniseed Syrup`,
SupplierID: 1,
CategoryID: 2,
QuantityPerUnit: `12 - 550 ml bottles`,
UnitPrice: 10,
UnitsInStock: 13,
UnitsOnOrder: 70,
ReorderLevel: 25,
Discontinued: false,
OrderDate: `2006-03-17`,
Rating: 3,
Locations: [
new NwindDataItem_LocationsItem(
{
Shop: `Farmer Market`,
LastInventory: `04/04/2018`
}),
new NwindDataItem_LocationsItem(
{
Shop: `Street Market`,
LastInventory: `12/12/2018`
}),
new NwindDataItem_LocationsItem(
{
Shop: `24/7 Market`,
LastInventory: `11/11/2018`
})]
}));
this.push(new NwindDataItem(
{
ProductID: 4,
ProductName: `Chef Antons Cajun Seasoning`,
SupplierID: 2,
CategoryID: 2,
QuantityPerUnit: `48 - 6 oz jars`,
UnitPrice: 22,
UnitsInStock: 53,
UnitsOnOrder: 30,
ReorderLevel: 0,
Discontinued: false,
OrderDate: `2016-03-17`,
Rating: 3,
Locations: [
new NwindDataItem_LocationsItem(
{
Shop: `Fun-Tasty Co.`,
LastInventory: `06/12/2018`
}),
new NwindDataItem_LocationsItem(
{
Shop: `Farmer Market`,
LastInventory: `04/04/2018`
}),
new NwindDataItem_LocationsItem(
{
Shop: `Street Market`,
LastInventory: `12/12/2018`
})]
}));
this.push(new NwindDataItem(
{
ProductID: 5,
ProductName: `Chef Antons Gumbo Mix`,
SupplierID: 2,
CategoryID: 2,
QuantityPerUnit: `36 boxes`,
UnitPrice: 21.35,
UnitsInStock: 0,
UnitsOnOrder: 30,
ReorderLevel: 0,
Discontinued: true,
OrderDate: `2011-11-11`,
Rating: 5,
Locations: [
new NwindDataItem_LocationsItem(
{
Shop: `Super Market`,
LastInventory: `09/09/2018`
})]
}));
this.push(new NwindDataItem(
{
ProductID: 6,
ProductName: `Grandmas Boysenberry Spread`,
SupplierID: 3,
CategoryID: 2,
QuantityPerUnit: `12 - 8 oz jars`,
UnitPrice: 25,
UnitsInStock: 0,
UnitsOnOrder: 30,
ReorderLevel: 25,
Discontinued: false,
OrderDate: `2017-12-17`,
Rating: 4,
Locations: [
new NwindDataItem_LocationsItem(
{
Shop: `Super Market`,
LastInventory: `09/09/2018`
})]
}));
this.push(new NwindDataItem(
{
ProductID: 7,
ProductName: `Uncle Bobs Organic Dried Pears`,
SupplierID: 3,
CategoryID: 7,
QuantityPerUnit: `12 - 1 lb pkgs.`,
UnitPrice: 30,
UnitsInStock: 150,
UnitsOnOrder: 30,
ReorderLevel: 10,
Discontinued: false,
OrderDate: `2016-07-17`,
Rating: 5,
Locations: [
new NwindDataItem_LocationsItem(
{
Shop: `Fun-Tasty Co.`,
LastInventory: `06/12/2018`
}),
new NwindDataItem_LocationsItem(
{
Shop: `Farmer Market`,
LastInventory: `04/04/2018`
}),
new NwindDataItem_LocationsItem(
{
Shop: `Street Market`,
LastInventory: `12/12/2018`
})]
}));
this.push(new NwindDataItem(
{
ProductID: 8,
ProductName: `Northwoods Cranberry Sauce`,
SupplierID: 3,
CategoryID: 2,
QuantityPerUnit: `12 - 12 oz jars`,
UnitPrice: 40,
UnitsInStock: 6,
UnitsOnOrder: 30,
ReorderLevel: 0,
Discontinued: false,
OrderDate: `2018-01-17`,
Rating: 4,
Locations: [
new NwindDataItem_LocationsItem(
{
Shop: `Fun-Tasty Co.`,
LastInventory: `06/12/2018`
}),
new NwindDataItem_LocationsItem(
{
Shop: `Farmer Market`,
LastInventory: `04/04/2018`
})]
}));
this.push(new NwindDataItem(
{
ProductID: 9,
ProductName: `Mishi Kobe Niku`,
SupplierID: 4,
CategoryID: 6,
QuantityPerUnit: `18 - 500 g pkgs.`,
UnitPrice: 97,
UnitsInStock: 29,
UnitsOnOrder: 30,
ReorderLevel: 0,
Discontinued: true,
OrderDate: `2010-02-17`,
Rating: 4,
Locations: [
new NwindDataItem_LocationsItem(
{
Shop: `Farmer Market`,
LastInventory: `04/04/2018`
})]
}));
this.push(new NwindDataItem(
{
ProductID: 10,
ProductName: `Ikura`,
SupplierID: 4,
CategoryID: 8,
QuantityPerUnit: `12 - 200 ml jars`,
UnitPrice: 31,
UnitsInStock: 31,
UnitsOnOrder: 30,
ReorderLevel: 0,
Discontinued: false,
OrderDate: `2008-05-17`,
Rating: 3,
Locations: [
new NwindDataItem_LocationsItem(
{
Shop: `Wall Market`,
LastInventory: `12/06/2018`
})]
}));
this.push(new NwindDataItem(
{
ProductID: 11,
ProductName: `Queso Cabrales`,
SupplierID: 5,
CategoryID: 4,
QuantityPerUnit: `1 kg pkg.`,
UnitPrice: 21,
UnitsInStock: 22,
UnitsOnOrder: 30,
ReorderLevel: 30,
Discontinued: false,
OrderDate: `2009-01-17`,
Rating: 5,
Locations: [
new NwindDataItem_LocationsItem(
{
Shop: `Fun-Tasty Co.`,
LastInventory: `06/12/2018`
}),
new NwindDataItem_LocationsItem(
{
Shop: `Farmer Market`,
LastInventory: `04/04/2018`
})]
}));
this.push(new NwindDataItem(
{
ProductID: 12,
ProductName: `Queso Manchego La Pastora`,
SupplierID: 5,
CategoryID: 4,
QuantityPerUnit: `10 - 500 g pkgs.`,
UnitPrice: 38,
UnitsInStock: 86,
UnitsOnOrder: 30,
ReorderLevel: 0,
Discontinued: false,
OrderDate: `2015-11-17`,
Rating: 3,
Locations: [
new NwindDataItem_LocationsItem(
{
Shop: `Farmer Market`,
LastInventory: `04/04/2018`
})]
}));
this.push(new NwindDataItem(
{
ProductID: 13,
ProductName: `Konbu`,
SupplierID: 6,
CategoryID: 8,
QuantityPerUnit: `2 kg box`,
UnitPrice: 6,
UnitsInStock: 24,
UnitsOnOrder: 30,
ReorderLevel: 5,
Discontinued: false,
OrderDate: `2015-03-17`,
Rating: 2,
Locations: [
new NwindDataItem_LocationsItem(
{
Shop: `Super Market`,
LastInventory: `09/09/2018`
})]
}));
this.push(new NwindDataItem(
{
ProductID: 14,
ProductName: `Tofu`,
SupplierID: 6,
CategoryID: 7,
QuantityPerUnit: `40 - 100 g pkgs.`,
UnitPrice: 23.25,
UnitsInStock: 35,
UnitsOnOrder: 30,
ReorderLevel: 0,
Discontinued: false,
OrderDate: `2017-06-17`,
Rating: 4,
Locations: [
new NwindDataItem_LocationsItem(
{
Shop: `Farmer Market`,
LastInventory: `04/04/2018`
}),
new NwindDataItem_LocationsItem(
{
Shop: `Street Market`,
LastInventory: `12/12/2018`
})]
}));
this.push(new NwindDataItem(
{
ProductID: 15,
ProductName: `Genen Shouyu`,
SupplierID: 6,
CategoryID: 2,
QuantityPerUnit: `24 - 250 ml bottles`,
UnitPrice: 15.5,
UnitsInStock: 39,
UnitsOnOrder: 30,
ReorderLevel: 5,
Discontinued: false,
OrderDate: `2014-03-17`,
Rating: 4,
Locations: [
new NwindDataItem_LocationsItem(
{
Shop: `Local Market`,
LastInventory: `07/03/2018`
}),
new NwindDataItem_LocationsItem(
{
Shop: `Wall Market`,
LastInventory: `12/06/2018`
})]
}));
this.push(new NwindDataItem(
{
ProductID: 16,
ProductName: `Pavlova`,
SupplierID: 7,
CategoryID: 3,
QuantityPerUnit: `32 - 500 g boxes`,
UnitPrice: 17.45,
UnitsInStock: 29,
UnitsOnOrder: 30,
ReorderLevel: 10,
Discontinued: false,
OrderDate: `2018-03-28`,
Rating: 2,
Locations: [
new NwindDataItem_LocationsItem(
{
Shop: `Farmer Market`,
LastInventory: `04/04/2018`
}),
new NwindDataItem_LocationsItem(
{
Shop: `Street Market`,
LastInventory: `12/12/2018`
}),
new NwindDataItem_LocationsItem(
{
Shop: `24/7 Market`,
LastInventory: `11/11/2018`
})]
}));
this.push(new NwindDataItem(
{
ProductID: 17,
ProductName: `Alice Mutton`,
SupplierID: 7,
CategoryID: 6,
QuantityPerUnit: `20 - 1 kg tins`,
UnitPrice: 39,
UnitsInStock: 0,
UnitsOnOrder: 30,
ReorderLevel: 0,
Discontinued: true,
OrderDate: `2015-08-17`,
Rating: 2,
Locations: [
new NwindDataItem_LocationsItem(
{
Shop: `Farmer Market`,
LastInventory: `04/04/2018`
})]
}));
this.push(new NwindDataItem(
{
ProductID: 18,
ProductName: `Carnarvon Tigers`,
SupplierID: 7,
CategoryID: 8,
QuantityPerUnit: `16 kg pkg.`,
UnitPrice: 62.5,
UnitsInStock: 42,
UnitsOnOrder: 30,
ReorderLevel: 0,
Discontinued: false,
OrderDate: `2005-09-27`,
Rating: 2,
Locations: [
new NwindDataItem_LocationsItem(
{
Shop: `24/7 Market`,
LastInventory: `11/11/2018`
}),
new NwindDataItem_LocationsItem(
{
Shop: `Super Market`,
LastInventory: `09/09/2018`
})]
}));
this.push(new NwindDataItem(
{
ProductID: 19,
ProductName: `Teatime Chocolate Biscuits`,
SupplierID: 8,
CategoryID: 3,
QuantityPerUnit: ``,
UnitPrice: 9.2,
UnitsInStock: 25,
UnitsOnOrder: 30,
ReorderLevel: 5,
Discontinued: false,
OrderDate: `2001-03-17`,
Rating: 2,
Locations: [
new NwindDataItem_LocationsItem(
{
Shop: `Local Market`,
LastInventory: `07/03/2018`
})]
}));
this.push(new NwindDataItem(
{
ProductID: 20,
ProductName: `Sir Rodneys Marmalade`,
SupplierID: 8,
CategoryID: 3,
QuantityPerUnit: `4 - 100 ml jars`,
UnitPrice: 4.5,
UnitsInStock: 40,
UnitsOnOrder: 30,
ReorderLevel: 0,
Discontinued: false,
OrderDate: `2005-03-17`,
Rating: 5,
Locations: [
new NwindDataItem_LocationsItem(
{
Shop: `Super Market`,
LastInventory: `09/09/2018`
})]
}));
}
}
tsimport React, { useEffect, useRef, useState } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrButton, IgrInput, IgrSwitch, IgrCheckboxChangeEventArgs, IgrComponentDataValueChangedEventArgs, IgrComponentValueChangedEventArgs } from "@infragistics/igniteui-react";
import { IgrGridBaseDirective, IgrGridModule, IgrColumnComponentEventArgs } from "@infragistics/igniteui-react-grids";
import { IgrGrid, IgrColumn } from "@infragistics/igniteui-react-grids";
import { NwindData } from './NwindData';
import "@infragistics/igniteui-react-grids/grids/combined";
import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css";
const mods: any[] = [
IgrGridModule
];
mods.forEach((m) => m.register());
export default function App() {
let defaultSeparator = " ";
const data = new NwindData();
const gridRef = useRef<IgrGrid>(null);
useEffect(() => {
defaultSeparator = gridRef.current.clipboardOptions.separator;
}, []);
const onColumnInit = (grid: IgrGridBaseDirective, args: IgrColumnComponentEventArgs) => {
let column = args.detail;
column.formatter = (val: any) => "** " + val + " **"
column.header = "🎉" + column.field;
}
const changeCopySeparator = (inputComponent: IgrInput, args: IgrComponentValueChangedEventArgs): void => {
gridRef.current.clipboardOptions.separator = args.detail || defaultSeparator;
}
const changeGridCopyBehavior = (switchComponent: any, args: IgrCheckboxChangeEventArgs): void => {
gridRef.current.clipboardOptions.enabled = args.detail.checked;
}
const changeGridCopyHeadersBehavior = (switchComponent: any, args: IgrCheckboxChangeEventArgs): void => {
gridRef.current.clipboardOptions.copyHeaders = args.detail.checked;
}
const changeGridCopyFormattersBehavior = (switchComponent: any, args: IgrCheckboxChangeEventArgs): void => {
gridRef.current.clipboardOptions.copyFormatters = args.detail.checked;
}
const clearSelection = () => {
gridRef.current.clearCellSelection();
}
return (
<>
<div className="container sample">
<div className="options horizontal" style={{gap: "1rem", alignItems: "center", margin: "1rem"}}>
<IgrInput placeholder='The default value is a single tabulation' style={{flex: "1 0 auto"}} change={changeCopySeparator}>
<span key="prefix" slot="prefix">Change copy separator:</span>
</IgrInput>
<IgrSwitch labelPosition="before" checked change={changeGridCopyBehavior}>
<span key="gridCopy">Grid copy behavior</span>
</IgrSwitch>
<IgrSwitch labelPosition="before" checked change={changeGridCopyHeadersBehavior}>
<span key="gridCopyHeaders">Copying of header labels</span>
</IgrSwitch>
<IgrSwitch labelPosition="before" checked change={changeGridCopyFormattersBehavior}>
<span key="gridCopyFormatters">Copying column formatters</span>
</IgrSwitch>
<IgrButton clicked={clearSelection}>
<span key="clearSelection">Clear selection</span>
</IgrButton>
</div>
<div className="container fill">
<IgrGrid autoGenerate={false} cellSelection="multiple" data={data} ref={gridRef} columnInit={onColumnInit}>
<IgrColumn field="ProductID" header="Product ID">
</IgrColumn>
<IgrColumn field="ProductName" header="Product Name">
</IgrColumn>
<IgrColumn field="SupplierID" header="Supplier ID">
</IgrColumn>
<IgrColumn field="CategoryID" header="Category ID">
</IgrColumn>
<IgrColumn field="QuantityPerUnit" header="Quantity Per Unit">
</IgrColumn>
<IgrColumn field="UnitPrice" header="Unit Price">
</IgrColumn>
<IgrColumn field="UnitsInStock" header="Units In Stock">
</IgrColumn>
</IgrGrid>
</div>
</div>
</>
);
}
// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);
tsx/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
.wrapper {
justify-content: space-evenly;
margin: 1rem;
}css
이 샘플이 마음에 드시나요? Ignite UI for React 전체에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.
기능성
복사 동작은 브라우저 및 운영 체제에서 정의한 기본 상호 작용으로 작동합니다. 따라서 복사 및 붙여넣기 동작의 경우 다음과 같습니다.
- Windows/Unix 기반
- Ctrl + C / Ctrl + Ins를 키보드 단축키로 사용
- 키보드 단축키로 Ctrl + V / Shift + Ins
- 브라우저 메뉴를 통해 작업 복사
- 맥 OS
- ⌘ 키보드 단축키로 Cmd + C
- ⌘ 키보드 단축키로 Cmd + V
- 브라우저 메뉴를 통해 작업 복사
제한 사항
- 둘 다 자르다 그리고 복사 이벤트는 Internet Explorer에서 기본적으로 지원되지 않습니다. 예외는 반죽 발생하지만 노출하지 않는 이벤트(IE 11)
ClipboardData이벤트의 재산.
IE 11에서 셀을 복사하려면 키보드 선택을 사용할 수 있습니다. 여러 셀을 선택하려면 Shift 키를 누르고, 복사하려면 Ctrl + C를 누르세요.
- 그리드가 편집 모드에 있는 동안에는 복사 동작이 비활성화됩니다.
- 이 기능의 현재 버전은 그리드 동작에서 복사만 다룹니다. 나중에 우리는 그리드 동작 내에서
paste노출할 계획입니다.
API 사용
다음 옵션을 처리하는 clipboardOptions 속성을 노출합니다.
Enabled선택한 셀의 복사를 활성화/비활성화합니다.CopyHeaders복사할 때 연관된 헤더를 포함합니다.CopyFormatters복사된 데이터에 기존 열 포맷터를 적용합니다.Separator클립보드의 데이터 형식을 지정하는 데 사용할 문자열 구분 기호입니다. 기본값은/t입니다.
Excel에서는 탭(탭으로 구분된 /t)으로 구분된 텍스트를 자동으로 감지하여 데이터를 별도의 열에 적절하게 붙여 넣을 수 있습니다. 붙여넣기 형식이 작동하지 않고 붙여넣은 모든 항목이 단일 열에 나타나는 경우 Excel의 구분 기호가 다른 문자로 설정되었거나 텍스트가 탭 대신 공백을 사용하는 것입니다.
GridCopy복사 작업이 실행될 때 발생합니다.clipboardOptions통해 복사 동작이 활성화된 경우에만 실행됩니다.
추가 리소스
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.