Acciones de fila en Web Components cuadrícula

La función Ignite UI for Web Components Acciones de fila en Web Components Grid permite a los desarrolladores usar IgcActionStrip y utilizar CRUD para los componentes de fila/celda y el anclaje de filas. Hay varios controles de interfaz de usuario predefinidos para estas operaciones que son aplicables a una fila específica en la edición y el IgcGridComponent anclaje.

Uso

Los componentes de la interfaz de usuario de acciones predefinidas son:

• IgcGridEditingActions: incluye funcionalidad y interfaz de usuario diseñadas específicamente para la edición IgcGridComponent. Le permite alternar rápidamente el modo de edición para celdas o filas, según la opción rowEditable y la eliminación de filas del IgcGridComponent.

• IgcGridPinningActions: incluye funcionalidad y interfaz de usuario diseñadas específicamente para la fijación de filas IgcGridComponent. Le permite fijar filas rápidamente y navegar entre filas fijadas y sus contrapartes deshabilitadas.

Se agregan dentro de la IgcGridComponent y todo esto es necesario para tener un IgcActionStrip proporcionar interacciones predeterminadas.

<igc-grid row-editable="true" primary-key="ID">
    <igc-column field="field"></igc-column>
    <igc-action-strip>
        <igc-grid-pinning-actions></igc-grid-pinning-actions>
        <igc-grid-editing-actions></igc-grid-editing-actions>
    </igc-action-strip>
</igc-grid>
html

Cuando ActionStripComponent es un componente secundario de IgcGridComponent, al pasar el cursor sobre una fila se mostrará automáticamente la interfaz de usuario.

Implementación personalizada

Estos componentes exponen plantillas, lo que brinda flexibilidad para la personalización. Por ejemplo, si queremos usar el para un escenario de Gmail con acciones de fila IgcActionStrip como eliminar, editar, etc. Simplemente puede crear un componente de botón con un icono, agregarle un evento de clic e insertarlo en el IgcActionStrip.

<igc-grid>
    <igx-action-strip #actionstrip>
        <igx-grid-pinning-actions></igx-grid-pinning-actions>
        <button title="Edit" igxButton="icon" igxRipple (click)='startEdit(actionstrip.context)'>
            <igx-icon>edit</igx-icon>
        </button>
        <button title="Delete" igxButton="icon" igxRipple *ngIf='!isDeleted(actionstrip.context)' (click)='actionstrip.context.delete()'>
            <igx-icon>delete</igx-icon>
        </button>
    </igx-action-strip>
</igc-grid>
html

<igc-grid>
    <igc-action-strip #actionstrip>
        <igc-grid-pinning-actions></igc-grid-pinning-actions>
        <igc-grid-editing-actions edit-row="true" delete-row="true"></igc-grid-editing-actions>
    </igc-action-strip>
</igc-grid>
html

EXAMPLE

TS

HTML

CSS

import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcGridComponent, IgcPinningConfig, RowPinningPosition, IgcActionStripComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
import NwindData from './NwindData.json';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";



ModuleManager.register(
    IgcPropertyEditorPanelModule
);

export class Sample {

    private grid: IgcGridComponent
    private _pinningConfig1: IgcPinningConfig | null = null;
    public get pinningConfig1(): IgcPinningConfig {
        if (this._pinningConfig1 == null)
        {
            var pinningConfig1: IgcPinningConfig = {} as IgcPinningConfig;
            pinningConfig1.rows = RowPinningPosition.Top;

            this._pinningConfig1 = pinningConfig1;
        }
        return this._pinningConfig1;
    }

    private actionStrip: IgcActionStripComponent
    private productName: IgcColumnComponent
    private unitPrice: IgcColumnComponent
    private unitsOnOrder: IgcColumnComponent
    private unitsInStock: IgcColumnComponent
    private quantityPerUnit: IgcColumnComponent
    private reorderLevel: IgcColumnComponent
    private discontinued: IgcColumnComponent
    private _bind: () => void;

    constructor() {
        var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
        var actionStrip = this.actionStrip = document.getElementById('actionStrip') as IgcActionStripComponent;
        var productName = this.productName = document.getElementById('ProductName') as IgcColumnComponent;
        var unitPrice = this.unitPrice = document.getElementById('UnitPrice') as IgcColumnComponent;
        var unitsOnOrder = this.unitsOnOrder = document.getElementById('UnitsOnOrder') as IgcColumnComponent;
        var unitsInStock = this.unitsInStock = document.getElementById('UnitsInStock') as IgcColumnComponent;
        var quantityPerUnit = this.quantityPerUnit = document.getElementById('QuantityPerUnit') as IgcColumnComponent;
        var reorderLevel = this.reorderLevel = document.getElementById('ReorderLevel') as IgcColumnComponent;
        var discontinued = this.discontinued = document.getElementById('Discontinued') as IgcColumnComponent;

        this._bind = () => {
            grid.data = this.nwindData;
            grid.pinning = this.pinningConfig1;
        }
        this._bind();
    }

    private _nwindData: any[] = NwindData;
    public get nwindData(): any[] {
        return this._nwindData;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            PropertyEditorPanelDescriptionModule.register(context);
            WebGridDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

}

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 ig-typography">

    <div class="container fill">
        <igc-grid
        auto-generate="false"
        name="grid"
        id="grid"
        row-editable="true"
        allow-filtering="true"
        primary-key="ProductID">
            <igc-action-strip
            name="actionStrip"
            id="actionStrip">
                <igc-grid-pinning-actions
                >
                </igc-grid-pinning-actions>
                <igc-grid-editing-actions
                edit-row="true"
                delete-row="true"
                add-row="true">
                </igc-grid-editing-actions>
            </igc-action-strip>
            <igc-column
            name="ProductName"
            id="ProductName"
            field="ProductName"
            header="Product Name">
            </igc-column>
            <igc-column
            name="UnitPrice"
            id="UnitPrice"
            field="UnitPrice"
            header="Unit Price">
            </igc-column>
            <igc-column
            name="UnitsOnOrder"
            id="UnitsOnOrder"
            field="UnitsOnOrder"
            header="Units On Order">
            </igc-column>
            <igc-column
            name="UnitsInStock"
            id="UnitsInStock"
            field="UnitsInStock"
            header="Units In Stock">
            </igc-column>
            <igc-column
            name="QuantityPerUnit"
            id="QuantityPerUnit"
            field="QuantityPerUnit"
            header="Quantity Per Unit">
            </igc-column>
            <igc-column
            name="ReorderLevel"
            id="ReorderLevel"
            field="ReorderLevel"
            header="Reorder Level">
            </igc-column>
            <igc-column
            name="Discontinued"
            id="Discontinued"
            field="Discontinued"
            header="Discontinued">
            </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.

Referencias de API

• IgcGridPinningActions
• IgcGridEditingActions

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

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