React Grid의 행 동작

React Grid의 Ignite UI for React 사용하면 개발자가 IgrActionStrip 사용하고 행/셀 구성 요소와 행 고정을 위한 CRUD를 활용할 수 있습니다. 이러한 작업에 대한 여러 가지 미리 정의된 UI 컨트롤이 있으며, IgrGrid의 특정 행에 적용할 수 있습니다. 편집 및 고정.

용법

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

• IgrGridEditingActions-IgrGrid 편집을 위해 특별히 설계된 기능과 UI가 포함되어 있습니다. rowEditable 옵션과 IgrGrid의 행 삭제에 따라 셀이나 행의 편집 모드를 빠르게 전환할 수 있습니다.

• IgrGridPinningActions-IgrGrid 행 고정을 위해 특별히 설계된 기능과 UI가 포함되어 있습니다. 이를 통해 행을 빠르게 고정하고 고정된 행과 비활성화된 행 사이를 탐색할 수 있습니다.

이는 IgrGrid 내부에 추가되며 기본 상호 작용을 제공하는 IgrActionStrip 갖는 데 모두 필요합니다.

<IgrGrid rowEditable={true} primaryKey="ID">
    <IgrColumn field="field">
    </IgrColumn>
    <IgrActionStrip>
        <IgrGridPinningActions></IgrGridPinningActions>
        <IgrGridEditingActions></IgrGridEditingActions>
    </IgrActionStrip>
</IgrGrid>
tsx

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

사용자 지정 구현

이러한 구성 요소는 사용자 지정을 위한 유연성을 제공하는 템플릿을 노출합니다. 예를 들어, IgrActionStrip 다음과 같은 행 작업이 있는 Gmail 시나리오의 경우 삭제하다, 편집하다 그리고 등등. 아이콘으로 버튼 구성 요소를 만들고 클릭 이벤트를 추가하고 삽입 할 수 있습니다. IgrActionStrip.

<IgrGrid>
    <IgrActionStrip>
        <IgrGridPinningActions></IgrGridPinningActions>
        <IgrGridEditingActions editRow={true} deleteRow={true}></IgrGridEditingActions>
    </IgrActionStrip>
</IgrGrid>
tsx

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

import { IgrPropertyEditorPanelModule } from "@infragistics/igniteui-react-layouts";
import { IgrGridModule } from "@infragistics/igniteui-react-grids";
import { IgrGrid, IgrPinningConfig, RowPinningPosition, IgrActionStrip, IgrGridPinningActions, IgrGridEditingActions, IgrColumn } from "@infragistics/igniteui-react-grids";
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebGridDescriptionModule } from "@infragistics/igniteui-react-core";
import NwindData from './NwindData.json';

import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css";

const mods: any[] = [
    IgrPropertyEditorPanelModule,
    IgrGridModule
];
mods.forEach((m) => m.register());

export default class Sample extends React.Component<any, any> {
    private grid: IgrGrid
    private gridRef(r: IgrGrid) {
        this.grid = r;
        this.setState({});
    }
    private  _pinningConfig1: IgrPinningConfig | null = null;
    public get pinningConfig1(): IgrPinningConfig {
        if (this._pinningConfig1 == null)
        {
            var pinningConfig1: IgrPinningConfig = {} as IgrPinningConfig;
            pinningConfig1.rows = RowPinningPosition.Top;

            this._pinningConfig1 = pinningConfig1;
        }
        return this._pinningConfig1;
    }
    private actionStrip: IgrActionStrip

    constructor(props: any) {
        super(props);

        this.gridRef = this.gridRef.bind(this);
    }

    public render(): JSX.Element {
        return (
        <div className="container sample ig-typography">

            <div className="container fill">
                <IgrGrid
                    autoGenerate={false}
                    ref={this.gridRef}
                    data={this.nwindData}
                    rowEditable={true}
                    allowFiltering={true}
                    pinning={this.pinningConfig1}
                    primaryKey="ProductID">
                    <IgrActionStrip
                    >
                        <IgrGridPinningActions
                        >
                        </IgrGridPinningActions>
                        <IgrGridEditingActions
                            editRow={true}
                            deleteRow={true}
                            addRow={true}>
                        </IgrGridEditingActions>
                    </IgrActionStrip>
                    <IgrColumn
                        field="ProductName"
                        header="Product Name">
                    </IgrColumn>
                    <IgrColumn
                        field="UnitPrice"
                        header="Unit Price">
                    </IgrColumn>
                    <IgrColumn
                        field="UnitsOnOrder"
                        header="Units On Order">
                    </IgrColumn>
                    <IgrColumn
                        field="UnitsInStock"
                        header="Units In Stock">
                    </IgrColumn>
                    <IgrColumn
                        field="QuantityPerUnit"
                        header="Quantity Per Unit">
                    </IgrColumn>
                    <IgrColumn
                        field="ReorderLevel"
                        header="Reorder Level">
                    </IgrColumn>
                    <IgrColumn
                        field="Discontinued"
                        header="Discontinued">
                    </IgrColumn>
                </IgrGrid>
            </div>
        </div>
        );
    }

    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;
    }

}

// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
cssコピー

Edit in: Codesandbox

이 샘플이 마음에 드시나요? Ignite UI for React 전체에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

API 참조

• IgrGridPinningActions
• IgrGridEditingActions

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

• Ignite UI for React 포럼
• Ignite UI for React GitHub