Web Components 그리드의 행 동작

Web Components Grid의 Ignite UI for Web Components 행 작업 기능을 통해 개발자는 행/셀 구성 요소 및 행 고정에 CRUD를 사용하고 IgcActionStrip 활용할 수 있습니다. 이러한 작업에 대해 편집 및 고정의 특정 행에 적용할 수 있는 몇 가지 미리 정의된 UI 컨트롤이 IgcGridComponent 있습니다.

Usage

사전 정의된 작업 UI 구성 요소는 다음과 같습니다.

IgcGridEditingActions-IgcGridComponent 편집을 위해 특별히 설계된 기능과 UI가 포함되어 있습니다. IgcGridComponent의 rowEditable 옵션 및 행 삭제에 따라 셀 또는 행의 편집 모드를 빠르게 전환할 수 있습니다.
IgcGridPinningActions-IgcGridComponent 행 고정을 위해 특별히 설계된 기능과 UI가 포함되어 있습니다. 이를 통해 행을 빠르게 고정하고 고정된 행과 비활성화된 행 사이를 탐색할 수 있습니다.

그것들은 내부에 IgcGridComponent 추가되며 이것은 모두 기본 상호 작용을 IgcActionStrip 제공하는 데 필요합니다.

<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

When ActionStripComponent is a child component of the IgcGridComponent, hovering a row will automatically show the UI.

Custom Implementation

이러한 구성 요소는 사용자 지정을 위한 유연성을 제공하는 템플릿을 노출합니다. 예를 들어, IgcActionStrip 다음과 같은 행 작업이 있는 Gmail 시나리오의 경우 삭제하다, 편집하다 그리고 등등. 아이콘이 있는 버튼 구성 요소를 만들고 클릭 이벤트를 추가하고 삽입하기만 하면 됩니다. 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

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

Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

API References

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