Web Components Grid クリップボードの概要

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

Web Components Grid クリップボードの例

EXAMPLE

DATA

TS

HTML

CSS

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`
                })]

        }));
    }
}
tsコピー

import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import 'igniteui-webcomponents-grids/grids/combined';
import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
import { NwindDataItem, NwindDataItem_LocationsItem, NwindData } from './NwindData';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents, IgcButtonComponent, IgcInputComponent, IgcSwitchComponent } from 'igniteui-webcomponents';
defineAllComponents();

import "./index.css";

export class Sample {
    private defaultSeparator: string;
    private grid: IgcGridComponent
    private _bind: () => void;

    constructor() {
        var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
        this.webGridClipboardOperationsColumnInit = this.webGridClipboardOperationsColumnInit.bind(this);

        this._bind = () => {
            grid.data = this.nwindData;
            grid.addEventListener("columnInit", this.webGridClipboardOperationsColumnInit);

            var copyBehaviorSwitch = document.getElementById("copy") as IgcSwitchComponent;
            copyBehaviorSwitch.addEventListener("igcChange", (ev: CustomEvent) => {
                grid.clipboardOptions.enabled = ev.detail.checked;
            });

            var copyHeaderSwitch = document.getElementById("headerCopy") as IgcSwitchComponent;
            copyHeaderSwitch.addEventListener("igcChange", (ev: CustomEvent) => {
                grid.clipboardOptions.copyHeaders = ev.detail.checked;
            });

            var formatterSwitch = document.getElementById("formatterCopy") as IgcSwitchComponent;
            formatterSwitch.addEventListener("igcChange", (ev: CustomEvent) => {
                grid.clipboardOptions.copyFormatters = ev.detail.checked;
            });

            var selectionClearBtn = document.getElementById("selectionClear") as IgcButtonComponent;
            selectionClearBtn.addEventListener('click', (ev: any) => {
                grid.cellSelection = 'none';
                grid.cellSelection = 'multiple';
            });

            var input = document.getElementById("input") as IgcInputComponent;
            input.addEventListener("igcChange", (ev: CustomEvent) => {
                if (!this.defaultSeparator) {
                    this.defaultSeparator = grid.clipboardOptions.separator;
                }
                grid.clipboardOptions.separator = ev.detail || this.defaultSeparator;
            });
        }
        this._bind();
    }

    private _nwindData: NwindData = null;
    public get nwindData(): NwindData {
        if (this._nwindData == null)
        {
            this._nwindData = new NwindData();
        }
        return this._nwindData;
    }

    public webGridClipboardOperationsColumnInit(args: any): void {
        let column = args.detail;
        column.formatter = (e: any) => { return "** " + e + " **" };
        column.header = "🎉" + column.field;
    }
}

new Sample();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>Sample | Ignite UI | Web Components | infragistics</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
    <link rel="stylesheet" href="/src/index.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample">
    <div class="options horizontal" style="gap: 50px;">
      <igc-input id="input">
        <span slot="prefix">Change copy separator:</span>
        <span slot="helper-text">The default value is a single tabulation.</span>
      </igc-input>
      <igc-switch id="copy" label-position="before" checked>Grid copy behavior</igc-switch>
      <igc-switch id="headerCopy" label-position="before" checked>Copying of header labels</igc-switch>
      <igc-switch id="formatterCopy" label-position="before" checked>Copying column formatters</igc-switch>
      <igc-button id="selectionClear">Clear selection</igc-button>
    </div>

    <div class="container fill">
        <igc-grid
        auto-generate="false"
        name="grid"
        id="grid"
        row-editable="true">
            <igc-column
            field="ProductID"
            header="Product ID">
            </igc-column>
            <igc-column
            field="ProductName"
            header="Product Name">
            </igc-column>
            <igc-column
            field="SupplierID"
            header="Supplier ID">
            </igc-column>
            <igc-column
            field="CategoryID"
            header="Category ID">
            </igc-column>
            <igc-column
            field="QuantityPerUnit"
            header="Quantity Per Unit">
            </igc-column>
            <igc-column
            field="UnitPrice"
            header="Unit Price">
            </igc-column>
            <igc-column
            field="UnitsInStock"
            header="Units In Stock">
            </igc-column>
        </igc-grid>
    </div>
</div>

    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

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

機能

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

• 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 Web Components フォーラム (英語)
• Ignite UI for Web Components GitHub (英語)