Angular Grid クリップボードの操作

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

最速で機能豊富な Angular Data Grid は、ページング、ソート、フィルタリング、グループ化、PDF および Excel へのエクスポートなどの機能を提供します。究極のアプリ構築エクスペリエンスとデータ操作に必要なすべてが揃っています。

無料で試してみる

Angular Grid クリップボード操作の例

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { GridClipboardSampleComponent } from "./grid/grid-clipboard-operations-sample/grid-clipboard-operations-sample.component";
import { 
	IgxGridModule,
	IgxSwitchModule
 } from "igniteui-angular";
import { IgxPreventDocumentScrollModule } from "./directives/prevent-scroll.directive";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	GridClipboardSampleComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxPreventDocumentScrollModule,
	IgxGridModule,
	IgxSwitchModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component } from '@angular/core';
import { DATA } from '../../data/nwindData';

@Component({
    selector: 'app-grid-clipboard-operations-sample',
    styleUrls: ['grid-clipboard-operations-sample.component.scss'],
    templateUrl: './grid-clipboard-operations-sample.component.html'
})
export class GridClipboardSampleComponent {
    public data: any[];
    public options = {
        enabled: true,
        copyHeaders: true,
        copyFormatters: true,
        separator: '\t'
    };

    constructor() {
        this.data = DATA;
    }

    public formatter = (value: any) => `** ${value} **`;

    public initColumn(column) {
        column.formatter = this.formatter;
        column.header = `🎉${column.field}`;
        if (column.index > 6) {
            column.hidden = true;
        }
    }
}
tsコピー

<div class="wrapper theme">
    <div class="sample-content">
        <div class="sample-column">
            <igx-input-group type="box">
                <label igxLabel>Change copy separator</label>
                <input type="text" igxInput [(ngModel)]="options.separator" />
                <igx-suffix (pointerup)="options.separator = '\t'">
                    <igx-icon>clear</igx-icon>
                </igx-suffix>
                <igx-hint>
                    The default value is a single tabulation which is shown as whitespace above.
                    Click the clear icon to reset it back to tabulation.
                </igx-hint>
            </igx-input-group>
            <div class="grid-wrapper">
                <igx-grid [igxPreventDocumentScroll]="true" #grid [data]="data" primaryKey="ProductID" [rowEditable]="true" (columnInit)="initColumn($event)" [clipboardOptions]="options" [autoGenerate]="true">
                    <igx-grid-toolbar>
                        <div class="tlb">
                            <igx-switch [(ngModel)]="options.enabled">Grid copy behavior</igx-switch>
                            <igx-switch [(ngModel)]="options.copyHeaders">Copying of header labels</igx-switch>
                            <igx-switch [(ngModel)]="options.copyFormatters">Copying column formatters</igx-switch>
                            <button igxButton="outlined" (click)="grid.clearCellSelection()">
                                <igx-icon family="material">clear</igx-icon>
                                <span>Selection</span>
                            </button>
                        </div>

                    </igx-grid-toolbar>
                </igx-grid>
            </div>

            <div style="margin-top: 0.5rem">
                <igx-input-group type="box">
                    <label igxLabel>Paste your data here (or in Excel)</label>
                    <textarea igxInput cols="30" rows="5"></textarea>
                </igx-input-group>
            </div>
        </div>
    </div>
</div>
htmlコピー

@use '../../../variables' as *;

:host ::ng-deep {
    .igx-switch__label {
        line-height: 1rem;
    }
}

.tlb {
    display: flex;
    max-width: 734px;
}

.grid-wrapper {
    width: 50wh;
    height: 364px;
    margin-top: 7px;
}
scssコピー

Edit in: CodesandboxStackBlitz

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

機能

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

• 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 を押します。

• グリッドが編集モードの間、コピー動作は無効になります。
• この機能の現在のバージョンは、グリッドからのコピー動作のみをカバーします。今後、グリッドの動作内で貼り付けを公開する予定です。 カスタムの貼り付けハンドラを使って貼り付けの動作を設定することができます。Excel から貼り付けトピックをご覧ください 。

API の使用

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

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

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

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

その他のリソース

• Grid 概要
• ページング
• フィルタリング
• ソート
• 集計
• 列のピン固定
• 選択
• 仮想化とパフォーマンス
• 複数列ヘッダー

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

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