React Tree Grid クリップボードの概要

クリップボードへのコピー操作が IgrTreeGrid で可能になりました。この機能は、現在の複数セル データ選択を通して React IgrTreeGrid のデータをすばやくコピーするための簡単でカスタマイズ可能な方法を提供します。システム クリップボードの動作により、ユーザーは IgrTreeGrid から Excel または他の外部プログラムにデータをコピーできます。

React Tree Grid クリップボードの例

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 { 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コピー

Edit in: Codesandbox

このサンプルが気に入りましたか? 完全な Ignite UI for Reactツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

機能

コピー動作は、ブラウザーとオペレーティング システムで定義されているデフォルトのインタラクションで動作します。以下は、コピー＆ペースト動作の場合です。

• Windows または Unix
  • キーボード ショートカット: Ctrl + C / Ctrl + Ins
  • キーボード ショートカット: Ctrl + V / Shift + Ins
  • ブラウザー メニューからのコピー操作
• macOS
  • キーボード ショートカット: ⌘ Cmd + C
  • キーボード ショートカット: ⌘ Cmd + V
  • ブラウザー メニューからのコピー操作

制限

• カットとコピーの両方のイベントは、Internet Explorer では本来サポートされていません。paste イベント (IE 11) は発生されますが、イベントの ClipboardData プロパティを公開しません。

IE 11のセルをコピーするためには、キーボード選択を使用できます。複数セルを選択するには Shift キー を押しながらコピーするには Ctrl + C を押します。

• グリッドが編集モードの間、コピー動作は無効になります。
• この機能の現在のバージョンは、グリッドからのコピー動作のみをカバーします。今後、グリッドの動作内で貼り付けを公開する予定です。

API の使用

次のオプションを処理する clipboardOptions プロパティを公開します。

• Enabled は選択したセルのコピーを有効または無効にします。
• CopyHeaders は、コピー時に関連付けられているヘッダーを含めます。
• CopyFormatters は、既存の列フォーマッタをコピーしたデータに適用します。
• Separator は、クリップボードのデータのフォーマットに使用する文字列の区切り文字。デフォルトは /t です。

Excel は、タブで区切られたテキスト (タブ区切り /t) を自動的に検出し、データを別々の列に正しく貼り付けることができます。貼り付け形式が機能せず、貼り付けたものがすべて 1 列に表示される場合は、Excel の区切り文字が別の文字に設定されている、またはテキストがタブではなくスペースを使用しています。

• GridCopy は、コピー操作が実行されたときに発生します。clipboardOptions を使用してコピー動作が有効になっている場合のみ発生します。

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。

• Ignite UI for React フォーラム (英語)
• Ignite UI for React GitHub (英語)