Acciones de fila en Web Components cuadrícula jerárquica

La función Ignite UI for Web Components acciones de fila en Web Components cuadrícula jerárquica permite a los desarrolladores usar IgcActionStrip y utilizar CRUD para los componentes de fila/celda y la fijación 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 IgcHierarchicalGridComponent anclaje.

Uso

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

IgcGridEditingActions- Incluye funcionalidad y una interfaz de usuario diseñada específicamente para la IgcHierarchicalGridComponent edición. Le permite alternar rápidamente el modo de edición para celdas o filas, dependiendo de la opción y la rowEditable eliminación de filas de la IgcHierarchicalGridComponent.
IgcGridPinningActions- Incluye funcionalidad e interfaz de usuario diseñada específicamente para el anclaje de IgcHierarchicalGridComponent filas. Le permite anclar filas rápidamente y navegar entre las filas ancladas y sus contrapartes deshabilitadas.

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

<igc-hierarchical-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-hierarchical-grid>
html

Cuando ActionStripComponent es un componente secundario de IgcHierarchicalGridComponent, al mantener el puntero 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-hierarchical-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-hierarchical-grid>
html

import 'igniteui-webcomponents-grids/grids/combined';
import { IgcHierarchicalGridComponent, IgcPinningConfig, RowPinningPosition, IgcActionStripComponent } from 'igniteui-webcomponents-grids/grids';
import SingersData from './SingersData.json';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";



export class Sample {

    private hierarchicalGrid1: IgcHierarchicalGridComponent
    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 _bind: () => void;

    constructor() {
        var hierarchicalGrid1 = this.hierarchicalGrid1 = document.getElementById('hierarchicalGrid1') as IgcHierarchicalGridComponent;
        var actionStrip = this.actionStrip = document.getElementById('actionStrip') as IgcActionStripComponent;

        this._bind = () => {
            hierarchicalGrid1.data = this.singersData;
            hierarchicalGrid1.pinning = this.pinningConfig1;
        }
        this._bind();
    }

    private _singersData: any[] = SingersData;
    public get singersData(): any[] {
        return this._singersData;
    }

}

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-hierarchical-grid
        auto-generate="false"
        primary-key="ID"
        row-editable="true"
        allow-filtering="true"
        name="hierarchicalGrid1"
        id="hierarchicalGrid1">
            <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
            field="Artist"
            header="Artist"
            data-type="string"
            sortable="true">
            </igc-column>
            <igc-column
            field="Photo"
            header="Photo"
            data-type="image"
            sortable="true">
            </igc-column>
            <igc-column
            field="Debut"
            header="Debut"
            data-type="number"
            sortable="true">
            </igc-column>
            <igc-column
            field="GrammyNominations"
            header="Grammy Nominations"
            data-type="number"
            sortable="true">
            </igc-column>
            <igc-column
            field="GrammyAwards"
            header="Grammy Awards"
            data-type="number"
            sortable="true">
            </igc-column>
            <igc-row-island
            child-data-key="Albums"
            auto-generate="false">
                <igc-column
                field="Album"
                header="Album"
                data-type="string"
                sortable="true">
                </igc-column>
                <igc-column
                field="LaunchDate"
                header="Launch Date"
                data-type="date"
                sortable="true">
                </igc-column>
                <igc-column
                field="BillboardReview"
                header="Billboard Review"
                data-type="string"
                sortable="true">
                </igc-column>
                <igc-column
                field="USBillboard200"
                header="US Billboard 200"
                data-type="string"
                sortable="true">
                </igc-column>
                <igc-row-island
                child-data-key="Songs"
                auto-generate="false">
                    <igc-column
                    field="Number"
                    header="No."
                    data-type="string">
                    </igc-column>
                    <igc-column
                    field="Title"
                    header="Title"
                    data-type="string">
                    </igc-column>
                    <igc-column
                    field="Released"
                    header="Released"
                    data-type="date">
                    </igc-column>
                    <igc-column
                    field="Genre"
                    header="Genre"
                    data-type="string">
                    </igc-column>
                </igc-row-island>
            </igc-row-island>
            <igc-row-island
            child-data-key="Tours"
            auto-generate="false">
                <igc-column
                field="Tour"
                header="Tour"
                data-type="string">
                </igc-column>
                <igc-column
                field="StartedOn"
                header="Started on"
                data-type="string">
                </igc-column>
                <igc-column
                field="Location"
                header="Location"
                data-type="string">
                </igc-column>
                <igc-column
                field="Headliner"
                header="Headliner"
                data-type="string">
                </igc-column>
            </igc-row-island>
        </igc-hierarchical-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

¿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

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