React Grid Excel から貼り付け

Ignite UI for React IgrGrid は、クリップボードにコピーした Excel データを読み込むことができます。このトピックでは、カスタムコードを使用して実装する方法について説明します。

React Excel から貼り付けの例

このサンプルでは、Excel から IgrGrid の貼り付けを実装する方法を紹介します。 サンプルは、Excel スプレッドシートを開いて行をコピーし、キーボード (CTRL + V、SHIFT + INSERT、CMD + V) を使用してグリッドに貼り付けます。

上部に2 つのオプションとドロップダウン ボタンがあります。

1. 新規行としてデータを貼り付け - このモードでは、Excel からコピーしたデータが新規行としてグリッドに追加されます。
2. アクティブ セルから開始する貼り付け - このモードではグリッド データが上書きされます。

貼り付け後の新しいデータはイタリックで装飾されます。

使用方法

最初にグリッドの rendered イベントにバインドして、テキスト エリア要素を作成して管理します。

<IgrGrid autoGenerate={false} data={this.invoicesData} onRendered={this.webGridPasteFromExcel} ref={this.gridRef} id="grid" primaryKey="OrderID">
    <IgrGridToolbar>
        <IgrGridToolbarActions>
            <IgrGridToolbarExporter exportExcel={true} exportCSV={false}>
            </IgrGridToolbarExporter>
        </IgrGridToolbarActions>
    </IgrGridToolbar>
    <IgrColumn field="OrderID" hidden={true}></IgrColumn>
    <IgrColumn field="Salesperson" header="Name" width="200px"></IgrColumn>
    <IgrColumn field="ShipName" header="Ship Name" width="200px"></IgrColumn>
    <IgrColumn field="Country" header="Country" width="200px"></IgrColumn>
    <IgrColumn field="ShipCity" header="Ship City" width="200px"></IgrColumn>
    <IgrColumn field="PostalCode" header="Postal Code" width="200px"> </IgrColumn>
</IgrGrid>

public webGridPasteFromExcel(e: CustomEvent<any>) {
    const grid = e.target as IgrGrid;
    this.onKeyDown = this.onKeyDown.bind(this);
    grid.addEventListener("keydown", this.onKeyDown);
}
public onKeyDown(eventArgs: any): void {
    const ctrl = eventArgs.ctrlKey;
    const key = eventArgs.keyCode;
    // Ctrl-V || Shift-Ins || Cmd-V
    if ((ctrl || eventArgs.metaKey) && key === 86 || eventArgs.shiftKey && key === 45) {
        this.textArea.focus();
    }
}

private txtArea: any;

public get textArea() {
    if(!this.txtArea) {
            const div = document.createElement("div");
            const divStyle = div.style;
            divStyle.position = "fixed";
            document.body.appendChild(div);
            this.txtArea = document.createElement("textarea");
            const style = this.txtArea.style;
            style.opacity = "0";
            style.height = "0px";
            style.width = "0px";
            style.overflow = "hidden";
            div.appendChild(this.txtArea);

            this.txtArea.addEventListener("paste", (eventArgs: any) => { this.onPaste(eventArgs); });
        }
        return this.txtArea;
    }

このコードはクリップボードから貼り付けられたデータを受け取るための DOM textarea 要素を作成します。コードは textarea に貼り付けられたデータが配列に解析します。

貼り付けたデータは、新しいレコードとして追加したり、ユーザーの選択に基づいて既存のレコードを更新するために使用したりすることができます。 addRecords と updateRecords メソッドを参照してください。

API リファレンス

その他のリソース

• Excel エクスポーター - Excel エクスポーター サービスを使用して、グリッドから Excel にデータをエクスポートします。選択したデータのみをグリッドからエクスポートするオプションもあります。エクスポート機能は、ExcelExporterService クラスでカプセル化され、MS Excel テーブル形式でデータをエクスポートします。この形式はフィルタリングやソートなどの機能が使用でき、ExcelExporterService の export メソッドを呼び出して最初の引数として グリッド コンポーネントを渡します。

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

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