Web Components 트리 그리드 클립보드 개요

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

Web Components 트리 그리드 클립보드 예제

EXAMPLE

DATA

TS

HTML

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: string;
    public Title: string;

}
export class EmployeesFlatDetails extends Array<EmployeesFlatDetailsItem> {
    public constructor() {
        super();
        this.push(new EmployeesFlatDetailsItem(
        {
            Address: `Obere Str. 57`,
            Age: 55,
            City: `Berlin`,
            Country: `Germany`,
            Fax: `030-0076545`,
            HireDate: `2008, 3, 20`,
            ID: 1,
            Name: `Johnathan Winchester`,
            ParentID: -1,
            Phone: `030-0074321`,
            PostalCode: `12209`,
            Title: `Development Manager`
        }));
        this.push(new EmployeesFlatDetailsItem(
        {
            Address: `Avda. de la Constitución 2222`,
            Age: 42,
            City: `México D.F.`,
            Country: `Mexico`,
            Fax: `(5) 555-3745`,
            HireDate: `2014, 1, 22`,
            ID: 4,
            Name: `Ana Sanders`,
            ParentID: -1,
            Phone: `(5) 555-4729`,
            PostalCode: `05021`,
            Title: `CEO`
        }));
        this.push(new EmployeesFlatDetailsItem(
        {
            Address: `Mataderos 2312`,
            Age: 49,
            City: `México D.F.`,
            Country: `Mexico`,
            Fax: `(5) 555-3995`,
            HireDate: `2014, 1, 22`,
            ID: 18,
            Name: `Victoria Lincoln`,
            ParentID: -1,
            Phone: `(5) 555-3932`,
            PostalCode: `05023`,
            Title: `Accounting Manager`
        }));
        this.push(new EmployeesFlatDetailsItem(
        {
            Address: `120 Hanover Sq.`,
            Age: 61,
            City: `London`,
            Country: `UK`,
            Fax: `(171) 555-6750`,
            HireDate: `2010, 1, 1`,
            ID: 10,
            Name: `Yang Wang`,
            ParentID: -1,
            Phone: `(171) 555-7788`,
            PostalCode: `WA1 1DP`,
            Title: `Localization Manager`
        }));
        this.push(new EmployeesFlatDetailsItem(
        {
            Address: `Berguvsvägen 8`,
            Age: 43,
            City: `Luleå`,
            Country: `Sweden`,
            Fax: `0921-12 34 67`,
            HireDate: `2011, 6, 3`,
            ID: 3,
            Name: `Michael Burke`,
            ParentID: 1,
            Phone: `0921-12 34 65`,
            PostalCode: `S-958 22`,
            Title: `Senior Software Developer`
        }));
        this.push(new EmployeesFlatDetailsItem(
        {
            Address: `Forsterstr. 57`,
            Age: 29,
            City: `Mannheim`,
            Country: `Germany`,
            Fax: `0621-08924`,
            HireDate: `2009, 6, 19`,
            ID: 2,
            Name: `Thomas Anderson`,
            ParentID: 1,
            Phone: `0621-08460`,
            PostalCode: `68306`,
            Title: `Senior Software Developer`
        }));
        this.push(new EmployeesFlatDetailsItem(
        {
            Address: `24, place Kléber`,
            Age: 31,
            City: `Strasbourg`,
            Country: `France`,
            Fax: `88.60.15.32`,
            HireDate: `2014, 8, 18`,
            ID: 11,
            Name: `Monica Reyes`,
            ParentID: 1,
            Phone: `88.60.15.31`,
            PostalCode: `67000`,
            Title: `Software Development Team Lead`
        }));
        this.push(new EmployeesFlatDetailsItem(
        {
            Address: `C/ Araquil, 67`,
            Age: 35,
            City: `Madrid`,
            Country: `Spain`,
            Fax: `(91) 555 91 99`,
            HireDate: `2015, 9, 17`,
            ID: 6,
            Name: `Roland Mendel`,
            ParentID: 11,
            Phone: `(91) 555 22 82`,
            PostalCode: `28023`,
            Title: `Senior Software Developer`
        }));
        this.push(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`
        }));
        this.push(new EmployeesFlatDetailsItem(
        {
            Address: `23 Tsawassen Blvd.`,
            Age: 44,
            City: `Tsawassen`,
            Country: `Canada`,
            Fax: `(604) 555-3745`,
            HireDate: `2014, 4, 4`,
            ID: 14,
            Name: `Laurence Johnson`,
            ParentID: 4,
            Phone: `(604) 555-4729`,
            PostalCode: `T2F 8M4`,
            Title: `Director`
        }));
        this.push(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: `EC2 5NT`,
            Title: `Vice President`
        }));
        this.push(new EmployeesFlatDetailsItem(
        {
            Address: `Cerrito 333`,
            Age: 39,
            City: `Buenos Aires`,
            Country: `Argentina`,
            Fax: `(1) 135-4892`,
            HireDate: `2010, 3, 22`,
            ID: 13,
            Name: `Trevor Ashworth`,
            ParentID: 5,
            Phone: `(1) 135-5555`,
            PostalCode: `1010`,
            Title: `Director`
        }));
        this.push(new EmployeesFlatDetailsItem(
        {
            Address: `Sierras de Granada 9993`,
            Age: 44,
            City: `México D.F.`,
            Country: `Mexico`,
            Fax: `(5) 555-7293`,
            HireDate: `2014, 4, 4`,
            ID: 17,
            Name: `Antonio Moreno`,
            ParentID: 18,
            Phone: `(5) 555-3392`,
            PostalCode: `05022`,
            Title: `Senior Accountant`
        }));
        this.push(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`
        }));
        this.push(new EmployeesFlatDetailsItem(
        {
            Address: `Av. dos Lusíadas, 23`,
            Age: 27,
            City: `Bern`,
            Country: `Switzerland`,
            Fax: ``,
            HireDate: `2016, 2, 19`,
            ID: 8,
            Name: `Casey Harper`,
            ParentID: 10,
            Phone: `(11) 555-7647`,
            PostalCode: `05432-043`,
            Title: `Senior Localization`
        }));
        this.push(new EmployeesFlatDetailsItem(
        {
            Address: `Berkeley Gardens 12`,
            Age: 25,
            City: `London`,
            Country: `UK`,
            Fax: `(171) 555-9199`,
            HireDate: `2017, 11, 9`,
            ID: 15,
            Name: `Patricia Simpson`,
            ParentID: 7,
            Phone: `(171) 555-2282`,
            PostalCode: `WX1 6LT`,
            Title: `Localization Intern`
        }));
        this.push(new EmployeesFlatDetailsItem(
        {
            Address: `Walserweg 21`,
            Age: 39,
            City: `Aachen`,
            Country: `Germany`,
            Fax: `0241-059428`,
            HireDate: `2010, 3, 22`,
            ID: 9,
            Name: `Francisco Chang`,
            ParentID: 7,
            Phone: `0241-039123`,
            PostalCode: `52066`,
            Title: `Localization Intern`
        }));
        this.push(new EmployeesFlatDetailsItem(
        {
            Address: `35 King George`,
            Age: 25,
            City: `London`,
            Country: `UK`,
            Fax: `(171) 555-3373`,
            HireDate: `2018, 3, 18`,
            ID: 16,
            Name: `Peter Lewis`,
            ParentID: 7,
            Phone: `(171) 555-0297`,
            PostalCode: `WX3 6FW`,
            Title: `Localization Intern`
        }));
    }
}
tsコピー

import 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
import { EmployeesFlatDetailsItem, EmployeesFlatDetails } from './EmployeesFlatDetails';
import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
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();

export class Sample {

    private clipboardEnabledEditor: IgcPropertyEditorPropertyDescriptionComponent
    private clipboardHeadersEditor: IgcPropertyEditorPropertyDescriptionComponent
    private clipboardFormattersEditor: IgcPropertyEditorPropertyDescriptionComponent
    private treeGrid: IgcTreeGridComponent
    private defaultSeparator: string;

    constructor() {
        var clipboardEnabledEditor = this.clipboardEnabledEditor = document.getElementById('ClipboardEnabledEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        var clipboardHeadersEditor = this.clipboardHeadersEditor = document.getElementById('ClipboardHeadersEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        var clipboardFormattersEditor = this.clipboardFormattersEditor = document.getElementById('ClipboardFormattersEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        this.webGridClearSelection = this.webGridClearSelection.bind(this);
        var grid = this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
        this.webGridClipboardOperationsColumnInit = this.webGridClipboardOperationsColumnInit.bind(this);

        grid.data = this.employeesFlatDetails;
        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;
        });
    }

    private _employeesFlatDetails: EmployeesFlatDetails = null;
    public get employeesFlatDetails(): EmployeesFlatDetails {
        if (this._employeesFlatDetails == null)
        {
            this._employeesFlatDetails = new EmployeesFlatDetails();
        }
        return this._employeesFlatDetails;
    }

    public webGridClearSelection(args: any): void {
        console.log("TODO" + args);
    	//TODO
    }

    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-tree-grid
        auto-generate="false"
        name="treeGrid"
        id="treeGrid"
        id="treeGrid"
        primary-key="ID"
        foreign-key="ParentID">
            <igc-column
            field="ID"
            data-type="number"
            sortable="true">
            </igc-column>
            <igc-column
            field="Name"
            data-type="string"
            sortable="true"
            disable-hiding="true">
            </igc-column>
            <igc-column
            field="Title"
            data-type="string"
            sortable="true"
            disable-hiding="true">
            </igc-column>
            <igc-column
            field="HireDate"
            data-type="date"
            sortable="true"
            hidden="true">
            </igc-column>
            <igc-column
            field="Age"
            data-type="number"
            sortable="true"
            hidden="true">
            </igc-column>
            <igc-column
            field="Address"
            data-type="string"
            sortable="true">
            </igc-column>
            <igc-column
            field="City"
            data-type="string"
            sortable="true">
            </igc-column>
            <igc-column
            field="Country"
            data-type="string"
            sortable="true">
            </igc-column>
            <igc-column
            field="Fax"
            data-type="string"
            sortable="true">
            </igc-column>
            <igc-column
            field="PostalCode"
            header="Postal Code"
            data-type="string"
            sortable="true">
            </igc-column>
            <igc-column
            field="Phone"
            data-type="string"
            sortable="true">
            </igc-column>
        </igc-tree-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​
  • 브라우저 메뉴를 통해 작업 복사
• 맥 OS
  • ⌘ 키보드 단축키로 Cmd + C​
  • ⌘ 키보드 단축키로 Cmd + V​
  • 브라우저 메뉴를 통해 작업 복사

제한 사항

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

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

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

API 사용

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

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

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

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

추가 리소스

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

• Ignite UI for Web Components 포럼
• ​GitHub Ignite UI for Web Components