Web Components 계층형 그리드의 행 작업

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

용법

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

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

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

<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

ActionStripComponent가 IgcHierarchicalGridComponent의 하위 구성 요소인 경우 행을 마우스로 가리키면 UI가 자동으로 표시됩니다.

사용자 지정 구현

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

이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

API 참조

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