React Tree Grid 클립보드 개요

이제 IgrTreeGrid에서 클립보드에 복사 작업을 사용할 수 있습니다. 이 기능은 현재 다중 셀 데이터 선택을 통해 React IgrTreeGrid의 데이터를 복사하는 빠르고 쉽고 사용자 정의 가능한 방법을 제공합니다. 시스템 클립보드 동작은 사용자가 IgrTreeGrid에서 Excel이나 다른 외부 프로그램으로 데이터를 복사할 수 있는 기능을 제공합니다.

React Tree Grid Clipboard Example

EXAMPLE

DATA

TSX

CSS

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)));
        }
    }
}
tsコピー

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

import { IgrColumnComponentEventArgs, IgrTreeGridModule } from "@infragistics/igniteui-react-grids";
import { IgrTreeGrid, IgrColumn } from "@infragistics/igniteui-react-grids";
import { EmployeesFlatDetails } from './EmployeesFlatDetails';

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}
                    onChange={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"
                    onChange={this.handleClipboardEnabledChange}
                >
                    <span key="clipboardEnabledLabel">Grid copy behavior</span>
                </IgrSwitch>
                <IgrSwitch
                    key="clipboardHeadersSwitch"
                    checked={this.state.clipboardHeaders}
                    labelPosition="before"
                    onChange={this.handleClipboardHeadersChange}
                >
                    <span key="clipboardHeadersLabel">Copying of header labels</span>
                </IgrSwitch>
                <IgrSwitch
                    key="clipboardFormattersSwitch"
                    checked={this.state.clipboardFormatters}
                    labelPosition="before"
                    onChange={this.handleClipboardFormattersChange}
                >
                    <span key="clipboardFormattersLabel">Copying column formatters</span>
                </IgrSwitch>
                <IgrButton 
                    key="clearSelectionButton" 
                    onClick={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
                    }}
                    onColumnInit={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.detail.value || this.defaultSeparator });
    }

    private handleClipboardEnabledChange(event: any) {
        this.setState({ clipboardEnabled: event.detail.checked });
    }

    private handleClipboardHeadersChange(event: any) {
        this.setState({ clipboardHeaders: event.detail.checked });
    }

    private handleClipboardFormattersChange(event: any) {
        this.setState({ clipboardFormatters: event.detail.checked });
    }

    private handleClearSelection() {
        this.treeGrid.clearCellSelection();
    }

    private webGridClipboardOperationsColumnInit = (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コピー

Edit in: Codesandbox

Functionality

복사 동작은 브라우저 및 운영 체제에서 정의한 기본 상호 작용으로 작동합니다. 따라서 복사 및 붙여넣기 동작의 경우 다음과 같습니다.

• Windows/Unix 기반
  • CTRL + C / CTRL + Ins as a keyboard shortcut
  • CTRL + V / SHIFT + Ins as a keyboard shortcut
  • 브라우저 메뉴를 통해 작업 복사
• 맥 OS
  • CMD + C as a keyboard shortcut
  • CMD + V as a keyboard shortcut
  • 브라우저 메뉴를 통해 작업 복사

Limitations

• 둘 다 자르다 그리고 복사 이벤트는 Internet Explorer에서 기본적으로 지원되지 않습니다. 예외는 반죽 발생하지만 노출하지 않는 이벤트(IE 11) ClipboardData 이벤트의 재산.

In order to copy cells in IE 11, you can use the keyboard selection. Hold the SHIFT key in order to make a multi-cell selection, press CTRL + C in order to copy.

• 그리드가 편집 모드에 있는 동안에는 복사 동작이 비활성화됩니다.
• 이 기능의 현재 버전은 그리드 동작에서 복사만 다룹니다. 나중에 우리는 그리드 동작 내에서 paste 노출할 계획입니다.

API Usage

다음 옵션을 처리하는 clipboardOptions 속성을 노출합니다.

• Enabled 선택한 셀의 복사를 활성화/비활성화합니다.
• CopyHeaders 복사할 때 연관된 헤더를 포함합니다.
• CopyFormatters 복사된 데이터에 기존 열 포맷터를 적용합니다.
• Separator 클립보드의 데이터 형식을 지정하는 데 사용할 문자열 구분 기호입니다. 기본값은 /t 입니다.

Excel can automatically detect text that is separated by tabs (tab-delimited /t) and properly paste the data into separate columns. When the paste format doesn't work, and everything you paste appears in a single column, then Excel's delimiter is set to another character, or your text is using spaces instead of tabs.

• GridCopy 복사 작업이 실행될 때 발생합니다. clipboardOptions 통해 복사 동작이 활성화된 경우에만 실행됩니다.

Additional Resources

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

• Ignite UI for React Forums
• Ignite UI for React GitHub