Descripción general del portapapeles de cuadrícula Web Components

Las operaciones de copia al portapapeles ahora están disponibles en IgcGridComponent. Esta funcionalidad proporciona una forma rápida, fácil y personalizable de copiar datos del Web Components IgcGridComponent a través de la selección de datos de múltiples celdas actual. El comportamiento del portapapeles del sistema le brinda al usuario la capacidad de copiar datos desde IgcGridComponent a Excel u otros programas externos.

Ejemplo de portapapeles de cuadrícula Web Components

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

¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

Funcionalidad

El comportamiento de copia funciona con la interacción predeterminada definida por el navegador y el sistema operativo. Así, para los comportamientos de copiar y pegar, estos son:

• Basado en Windows/Unix
  • Ctrl + C / Ctrl + Ins como atajo de teclado
  • Ctrl + V / Shift + Ins como atajo de teclado
  • Copiar acción a través del menú del navegador.
• Mac OS
  • ⌘ Cmd + C como atajo de teclado
  • ⌘ Cmd + V como atajo de teclado
  • Copiar acción a través del menú del navegador.

Limitaciones

• Tanto los eventos de corte como los de copia no son compatibles de forma nativa con Internet Explorer. La excepción es el evento de pegado (IE 11), que se emite pero no expone la propiedad ClipboardData en el evento.

Para copiar celdas en IE 11, puede utilizar la selección del teclado. Mantenga presionada la tecla Mayús para realizar una selección de varias celdas, presione Ctrl + C para copiar.

• El comportamiento de copia está deshabilitado mientras la cuadrícula está en modo de edición.
• La versión actual de esta función cubre solo el comportamiento de copia desde la cuadrícula. Más adelante planeamos exponer el comportamiento paste dentro de la cuadrícula.

Uso de API

Exponemos la propiedad clipboardOptions, que maneja las siguientes opciones:

• Enabled Habilita/deshabilita la copia de celdas seleccionadas.
• CopyHeaders Incluye los encabezados asociados al copiar.
• CopyFormatters Aplique cualquier formateador de columna existente a los datos copiados.
• Separator El separador de cadena que se utilizará para formatear los datos en el portapapeles. El valor predeterminado es /t

Excel puede detectar automáticamente texto separado por tabulaciones (delimitado por tabulaciones /t) y pegar correctamente los datos en columnas separadas. Cuando el formato de pegado no funciona y todo lo que pega aparece en una sola columna, entonces el delimitador de Excel está configurado en otro carácter o su texto usa espacios en lugar de tabulaciones.

• GridCopy Se emite cuando se ejecuta una operación de copia. Se activa solo si el comportamiento de copia está habilitado a través de clipboardOptions.

Recursos adicionales

• Paginación
• Filtración
• Clasificación
• resúmenes
• resúmenes
• Fijación de columnas
• Selección
• Virtualización y rendimiento
• Encabezados de varias columnas

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.

• Ignite UI for Web Components Foros
• Ignite UI for Web Components GitHub