Angular 트리 그리드 클립보드 상호 작용

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

Angular 트리 그리드 클립보드 상호 작용 예제

import { Component } from '@angular/core';
import { EMPLOYEE_DATA } from './data';
import { IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxSuffixDirective, IgxIconComponent, IgxHintDirective, IgxTreeGridComponent, IgxGridToolbarComponent, IgxSwitchComponent, IgxButtonDirective, IgxRippleDirective, IgxColumnComponent } from 'igniteui-angular';
import { FormsModule } from '@angular/forms';
import { IgxPreventDocumentScrollDirective } from '../directives/prevent-scroll.directive';

@Component({
    selector: 'app-tree-grid-clipboard-operations-sample',
    styleUrls: ['tree-grid-clipboard-operations-sample.component.scss'],
    templateUrl: './tree-grid-clipboard-operations-sample.component.html',
    imports: [IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxIconComponent, IgxHintDirective, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxSwitchComponent, IgxButtonDirective, IgxRippleDirective, IgxColumnComponent]
})
export class TreeGridClipboardSampleComponent {

    public data: any[];
    public options = {
        enabled: true,
        copyHeaders: true,
        copyFormatters: true,
        separator: '\t'
    };
    private frmt: Intl.DateTimeFormat;

    constructor() {
        this.data = EMPLOYEE_DATA;
    }

    public formatter = (value: any) => `** ${value} **`;
    public formatDate = (val: Date) => {
        if (!this.frmt) {
            this.frmt = new Intl.DateTimeFormat('en-US');
        }
        return this.frmt.format(val);
    };
    public initColumn(column) {
        if (column.dataType === 'date') {
            column.formatter = this.formatDate;
        } else {
            column.formatter = this.formatter;
        }
        column.header = `🎉${column.field}`;
    }
}
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-tree-grid [igxPreventDocumentScroll]="true"  #grid1 [data]="data" childDataKey="Employees" (columnInit)="initColumn($event)"
                    [autoGenerate]="false" [clipboardOptions]="options">
                    <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" igxRipple [igxRippleCentered]="true" (click)="grid1.clearCellSelection()">
                                <igx-icon family="material">clear</igx-icon>
                                <span>Selection</span>
                            </button>
                        </div>

                    </igx-grid-toolbar>

                    <igx-column field="ID"></igx-column>
                    <igx-column field="HireDate" dataType="date"></igx-column>
                    <igx-column field="Age" dataType="number" ></igx-column>
                    <igx-column field="Name" dataType="string"></igx-column>

                </igx-tree-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

: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

이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.

기능성

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

Windows/Unix 기반
- Ctrl + C / Ctrl + Ins를 키보드 단축키로 사용
- 키보드 단축키로 Ctrl + V / Shift + Ins
- 브라우저 메뉴를 통해 작업 복사
맥 OS
- ⌘ 키보드 단축키로 Cmd + C
- ⌘ 키보드 단축키로 Cmd + V
- 브라우저 메뉴를 통해 작업 복사

제한 사항

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

IE 11에서 셀을 copy 하려면 키보드 선택을 사용할 수 있습니다. 여러 셀을 선택하려면 shift key 누르고, 복사하려면 Ctrl + C 누르세요.

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

API 사용

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

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

Excel에서는 탭(탭으로 구분된 /t)으로 구분된 텍스트를 자동으로 감지하고 데이터를 별도의 열에 적절하게 붙여 넣을 수 있습니다. 붙여넣기 형식이 작동하지 않고 붙여넣은 모든 항목이 단일 열에 나타나는 경우 Excel의 구분 기호가 다른 문자로 설정되었거나 텍스트가 탭 대신 공백을 사용하는 것입니다.

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

추가 리소스

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

Angular 트리 그리드 클립보드 상호 작용

Angular 트리 그리드 클립보드 상호 작용 예제

기능성

제한 사항

API 사용

추가 리소스

테마