React 계층형 그리드 행 추가

React Hierarchical Grid의 Ignite UI for React 사용하면 사용자는 별도의 양식이나 페이지로 이동하지 않고도 새 데이터 레코드를 입력하고 제출할 수 있습니다. IgrHierarchicalGrid를 사용하면 사용자는 인라인 행 추가와 CRUD 작업을 위한 강력한 API를 통해 데이터를 조작할 수 있습니다. 그리드 템플릿에서 편집 작업이 활성화된 IgrActionStrip 구성 요소를 추가합니다. 그런 다음 행을 마우스오버하고 제공된 버튼을 사용합니다. 마지막으로 ALT + +를 눌러 행 추가 UI를 생성합니다.

React 계층형 그리드 행 추가 예제

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

import { IgrHierarchicalGridModule, IgrActionStripModule } from "@infragistics/igniteui-react-grids";
import { IgrHierarchicalGrid, IgrActionStrip, IgrGridEditingActions, IgrColumn, IgrRowIsland } from "@infragistics/igniteui-react-grids";
import SingersData from './SingersData.json';

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

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

export default class Sample extends React.Component<any, any> {
    private hGrid: IgrHierarchicalGrid
    private hGridRef(r: IgrHierarchicalGrid) {
        this.hGrid = r;
        this.setState({});
    }

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

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

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

            <div className="container fill">
                <IgrHierarchicalGrid
                    autoGenerate={false}
                    data={this.singersData}
                    id="hGrid"
                    ref={this.hGridRef}
                    primaryKey="ID"
                    rowEditable={true}>
                    <IgrActionStrip
                    >
                        <IgrGridEditingActions
                            addRow={true}>
                        </IgrGridEditingActions>
                    </IgrActionStrip>
                    <IgrColumn
                        field="Artist"
                        header="Artist"
                        dataType="string"
                        resizable={true}>
                    </IgrColumn>
                    <IgrColumn
                        field="Debut"
                        header="Debut"
                        dataType="number"
                        minWidth="88px"
                        maxWidth="230px"
                        resizable={true}>
                    </IgrColumn>
                    <IgrColumn
                        field="GrammyNominations"
                        header="Grammy Nominations"
                        dataType="string"
                        resizable={true}>
                    </IgrColumn>
                    <IgrColumn
                        field="GrammyAwards"
                        header="Grammy Awards"
                        dataType="string"
                        resizable={true}>
                    </IgrColumn>
                    <IgrRowIsland
                        childDataKey="Albums"
                        autoGenerate={false}
                        primaryKey="Album"
                        rowEditable={true}>
                        <IgrColumn
                            field="Album"
                            header="Album"
                            dataType="string"
                            resizable={true}>
                        </IgrColumn>
                        <IgrColumn
                            field="LaunchDate"
                            header="Launch Date"
                            dataType="date"
                            resizable={true}>
                        </IgrColumn>
                        <IgrColumn
                            field="BillboardReview"
                            header="Billboard Review"
                            dataType="string"
                            resizable={true}>
                        </IgrColumn>
                        <IgrColumn
                            field="USBillboard200"
                            header="US Billboard 200"
                            dataType="string"
                            resizable={true}>
                        </IgrColumn>
                        <IgrRowIsland
                            childDataKey="Songs"
                            autoGenerate={false}
                            primaryKey="Title"
                            rowEditable={true}>
                            <IgrActionStrip
                            >
                                <IgrGridEditingActions
                                    addRow={true}>
                                </IgrGridEditingActions>
                            </IgrActionStrip>
                            <IgrColumn
                                field="Number"
                                header="No."
                                dataType="string"
                                resizable={true}>
                            </IgrColumn>
                            <IgrColumn
                                field="Title"
                                header="Title"
                                dataType="string"
                                resizable={true}>
                            </IgrColumn>
                            <IgrColumn
                                field="Released"
                                header="Released"
                                dataType="string"
                                resizable={true}>
                            </IgrColumn>
                            <IgrColumn
                                field="Genre"
                                header="Genre"
                                dataType="string"
                                resizable={true}>
                            </IgrColumn>
                        </IgrRowIsland>
                    </IgrRowIsland>
                    <IgrRowIsland
                        childDataKey="Tours"
                        autoGenerate={false}
                        primaryKey="Tour"
                        rowEditable={true}>
                        <IgrActionStrip
                        >
                            <IgrGridEditingActions
                                addRow={true}>
                            </IgrGridEditingActions>
                        </IgrActionStrip>
                        <IgrColumn
                            field="Tour"
                            header="Tour"
                            dataType="string"
                            resizable={true}>
                        </IgrColumn>
                        <IgrColumn
                            field="StartedOn"
                            header="Started on"
                            dataType="string"
                            resizable={true}>
                        </IgrColumn>
                        <IgrColumn
                            field="Location"
                            header="Location"
                            dataType="string"
                            resizable={true}>
                        </IgrColumn>
                        <IgrColumn
                            field="Headliner"
                            header="Headliner"
                            dataType="string"
                            resizable={true}>
                        </IgrColumn>
                    </IgrRowIsland>
                </IgrHierarchicalGrid>
            </div>
        </div>
        );
    }

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

}

// 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

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

행 추가 사용법

그런 다음 바인딩된 데이터 소스를 정의하고 rowEditable IgrActionStrip true로 설정하고 편집 작업이 활성화된 구성 요소를 정의합니다 IgrHierarchicalGrid. 입력은 AddRow 행을 추가하는 UI를 생성하는 버튼의 가시성을 제어합니다.

<IgrHierarchicalGrid autoGenerate={false} data={singersData} id="hGrid" primaryKey="ID" rowEditable={true} ref={hierarchicalGrid1Ref}>
   <IgrActionStrip>
     <IgrGridEditingActions
        addRow={true}>
       </IgrGridEditingActions>
   </IgrActionStrip>
   <IgrColumn field="Artist" header="Artist" dataType="string" resizable={true}>
   </IgrColumn>
   <IgrColumn field="Debut" header="Debut" dataType="number" minWidth="88px" maxWidth="230px" resizable={true}>
   </IgrColumn>
   <IgrColumn field="GrammyNominations" header="Grammy Nominations" dataType="string" resizable={true}>
   </IgrColumn>
   <IgrColumn field="GrammyAwards" header="Grammy Awards" dataType="string" resizable={true}>
   </IgrColumn>
   <IgrRowIsland childDataKey="Albums" autoGenerate={false}>
       <IgrColumn field="Album" header="Album" dataType="string" resizable={true}>
       </IgrColumn>
       <IgrColumn field="LaunchDate" header="Launch Date" dataType="date" resizable={true}>
       </IgrColumn>
       <IgrColumn field="BillboardReview" header="Billboard Review" dataType="string" resizable={true}>
       </IgrColumn>
       <IgrColumn field="USBillboard200" header="US Billboard 200" dataType="string" resizable={true}>
       </IgrColumn>
       <IgrRowIsland childDataKey="Songs" autoGenerate={false}>
           <IgrActionStrip>
                <IgrGridEditingActions addRow={true}>
                </IgrGridEditingActions>
            </IgrActionStrip>
           <IgrColumn field="Number" header="No." dataType="string" resizable={true}>
           </IgrColumn>
           <IgrColumn field="Title" header="Title" dataType="string" resizable={true}>
           </IgrColumn>
           <IgrColumn field="Released" header="Released" dataType="string" resizable={true}>
           </IgrColumn>
           <IgrColumn field="Genre" header="Genre" dataType="string" resizable={true}>
           </IgrColumn>
       </IgrRowIsland>
   </IgrRowIsland>
   <IgrRowIsland childDataKey="Tours" autoGenerate={false}>
           <IgrActionStrip>
                <IgrGridEditingActions addRow={true}>
                </IgrGridEditingActions>
            </IgrActionStrip>                  
       <IgrColumn field="Tour" header="Tour" dataType="string" resizable={true}>
       </IgrColumn>
       <IgrColumn field="StartedOn" header="Started on" dataType="string" resizable={true}>
       </IgrColumn>
       <IgrColumn field="Location" header="Location" dataType="string" resizable={true}>
       </IgrColumn>
       <IgrColumn field="Headliner" header="Headliner" dataType="string" resizable={true}>
       </IgrColumn>
   </IgrRowIsland>
</IgrHierarchicalGrid>
tsx

참고: 행 추가 작업에는 기본 키 설정이 필수입니다.

참고: 기본 키를 제외한 모든 열은 기본적으로 UI를 추가하는 행에서 편집 가능합니다. 특정 열에 대한 편집을 비활성화하려면 editable 열의 입력을 false로 설정해야 합니다.

참고: 행 추가 버튼의 가시성을 제어하는 IgrGridEditingActions 입력은 버튼이 표시하는 레코드를 미세 조정하기 위해 IgrRowType 유형인 작업 스트립 컨텍스트를 사용할 수 있습니다.

내부 BaseTransactionService는 자동으로 제공됩니다 IgrHierarchicalGrid. 행 상태가 제출되거나 취소될 때까지 보류 중인 셀 변경 내용을 보관합니다.

프로그래밍 방식으로 행 추가 시작

IgrHierarchicalGrid 두 개의 서로 다른 공용 메서드를 사용하여 Add Row UI를 프로그래밍 방식으로 생성할 수 있습니다. 하나는 UI가 생성되어야 하는 행을 지정하기 위해 행 ID를 허용하는 것이고 다른 하나는 인덱스로 작동하는 것입니다. 이러한 메서드를 사용하여 현재 데이터 뷰 내의 아무 곳에나 UI를 생성할 수 있습니다. 페이지를 변경하거나 예를 들어 필터링된 행을 지정하는 것은 지원되지 않습니다.

beginAddRowById 사용하려면 해당 RowID (PK)를 통해 작업의 컨텍스트로 사용할 행을 지정해야 합니다. 그런 다음 메서드는 최종 사용자가 지정된 행에 대한 행 추가 작업 스트립 버튼을 클릭한 것처럼 작동하여 그 아래에 UI를 생성합니다. 첫 번째 매개변수에 null 전달하여 UI가 그리드의 첫 번째 행으로 생성되도록 할 수도 있습니다.

gridRef.current.beginAddRowById('ALFKI');  // Spawns the add row UI under the row with PK 'ALFKI'
gridRef.current.beginAddRowById(null);     // Spawns the add row UI as the first record
typescript

beginAddRowByIndex 메서드는 비슷하게 작동하지만 UI가 생성되어야 하는 인덱스를 지정해야 합니다. 허용되는 값의 범위는 0과 데이터 보기 크기 - 1 사이입니다.

gridRef.current.beginAddRowByIndex(10);   // Spawns the add row UI at index 10
gridRef.current.beginAddRowByIndex(0);    // Spawns the add row UI as the first record
typescript

포지셔닝

행 추가 UI의 기본 위치는 최종 사용자가 행 추가 버튼을 클릭한 행 아래에 있습니다.
스크롤하면 IgrHierarchicalGrid 행 추가 UI가 자동으로 완전히 표시됩니다.
행 추가 UI의 오버레이는 스크롤 중에 위치를 유지합니다.

행동

행 추가 UI는 최종 사용자에게 일관된 편집 환경을 제공하도록 설계되었으므로 행 편집 UI와 동작이 동일합니다. 자세한 내용은 계층적 그리드 행 편집 항목을 참조하세요.

행 추가 UI를 통해 새 행이 추가되면 해당 위치 및/또는 가시성은 의 정렬, 필터링 및 그룹화 상태에 IgrHierarchicalGrid 따라 결정됩니다. 이러한 상태가 적용되지 않은 a IgrHierarchicalGrid 에서는 마지막 레코드로 표시됩니다. 스낵바가 간략하게 표시되며, 최종 사용자가 보이지 않는 경우 해당 위치로 스크롤 IgrHierarchicalGrid 하는 데 사용할 수 있는 버튼이 포함되어 있습니다.

ALT + +- 행 추가를 위한 편집 모드로 들어갑니다.

ESC는 변경 사항을 제출하지 않고 행 추가 모드를 종료합니다.
Tab 키를 누르면 행의 편집 가능한 한 셀에서 다음 셀로, 가장 오른쪽의 편집 가능한 셀에서 CANCEL 및 DONE 버튼으로 초점을 이동합니다. 완료 버튼을 통한 탐색은 현재 편집된 행 내에서 편집 가능한 가장 왼쪽 셀로 이동합니다.

기능 통합

의 데이터 뷰 IgrHierarchicalGrid가 수정되면 모든 행 추가 작업이 중지됩니다. 최종 사용자가 변경한 모든 내용이 제출됩니다. 데이터 보기를 변경하는 작업에는 정렬, 그룹화, 필터링, 페이징 등이 포함되지만 이에 국한되지는 않습니다.
행 추가 작업이 완료된 후 요약이 업데이트됩니다. 정렬, 필터링 등과 같은 다른 데이터 보기 종속 기능에도 동일하게 적용됩니다.

에 대한 IgrHierarchicalGrid UI를 생성할 때 최종 사용자가 행 추가 버튼을 클릭하는 행에 대해 현재 확장된 모든 하위 레이아웃이 축소됩니다.

행 추가 오버레이 사용자 정의

텍스트 사용자 정의

RowAddTextDirective를 사용하여 오버레이를 추가하는 행의 텍스트를 사용자 정의할 수 있습니다.

gridRef.current.rowAddTextTemplate = (ctx: IgrGridEmptyTemplateContext) => {
    return (
        <>
            <span>Adding Row</span>
        </>
    );
}
tsx

스타일링

행 추가 UI는 IgrActionStrip 편집 작업의 버튼, 편집 편집기 및 오버레이, 최종 사용자가 새로 추가된 행으로 스크롤할 수 있는 스낵바로 구성됩니다. 이러한 구성 요소의 스타일을 지정하려면 해당 항목의 포괄적인 가이드를 참조할 수 있습니다.

API 참조

rowEditable
RowEditEnter
RowEdit
RowEditDone
RowEditCancel
endEdit
primaryKey
IgrHierarchicalGrid

추가 리소스

계층적 그리드 편집

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

React 계층형 그리드 행 추가