Web Components 트리 그리드 셀 편집

    트리 그리드의 Ignite UI for Web Components 셀 편집 Web Components Web Components 트리 그리드 구성 요소 내의 개별 셀 내용에 대한 뛰어난 데이터 조작 기능을 제공하며 React CRUD 작업을 위한 강력한 API와 함께 제공됩니다. 스프레드시트, 데이터 테이블 및 데이터 그리드와 같은 앱의 기본 기능으로, 사용자가 특정 셀 내에서 데이터를 추가, 편집 또는 업데이트할 수 있습니다. 기본적으로 Ignite UI for Web Components의 그리드는 셀 편집에 사용됩니다. 그리고 기본 셀 편집 템플릿으로 인해 열 데이터 유형 Top of Form에 따라 다른 편집기가 있습니다.

    또한 데이터 업데이트 작업에 대한 사용자 정의 템플릿을 정의하고 변경 사항 커밋 및 삭제에 대한 기본 동작을 재정의할 수 있습니다.

    Web Components 트리 그리드 셀 편집 및 템플릿 편집 예제

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

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

    셀 편집

    UI를 통한 편집

    다음 방법 중 하나로 편집 가능한 셀에 초점이 맞춰지면 특정 셀에 대한 편집 모드로 들어갈 수 있습니다.

    • 두 번 클릭하면;
    • 한 번 클릭 시 - 이전에 선택한 셀이 편집 모드이고 현재 선택한 셀이 편집 가능한 경우에만 한 번 클릭하면 편집 모드로 들어갑니다. 이전에 선택한 셀이 편집 모드가 아닌 경우 한 번 클릭하면 편집 모드로 들어가지 않고 셀이 선택됩니다.
    • 키를 누르면 Enter;
    • 키를 누르면 F2;

    다음 방법 중 하나로 변경 사항을 커밋하지 않고 편집 모드를 종료할 수 있습니다.

    • 키를 누를 때 Escape;
    • ​정렬, 필터링, 검색 및 숨기기 작업을 수행할 때

    다음 방법 중 하나로 편집 모드를 종료하고 변경 사항을 커밋 할 수 있습니다.

    • 키를 누르면 Enter;
    • 키를 누르면 F2;
    • 키를 누를 때 Tab;
    • 다른 셀을 한 번 클릭하면 -IgcTreeGridComponent에서 다른 셀을 클릭하면 변경 사항이 제출됩니다.
    • 페이징, 크기 조정, 고정 또는 이동과 같은 작업을 수행하면 편집 모드가 종료되고 변경 사항이 제출됩니다.

    수직 또는 수평으로 스크롤하거나 IgcTreeGridComponent 외부를 클릭하면 셀은 편집 모드로 유지됩니다. 이는 셀 편집과 행 편집 모두에 유효합니다.

    API를 통한 편집

    ​IgcTreeGridComponent API를 통해 셀 값을 수정할 수도 있지만 기본 키가 정의된 경우에만 가능합니다.

    public updateCell() {
    this.treeGrid.updateCell(newValue, rowID, 'Age');
}
typescript

    셀을 업데이트하는 또 다른 방법은 다음과 같은 방법을 사용하는 Update 것입니다. Cell​

    public updateCell() {
    const cell = this.treeGrid.getCellByColumn(rowIndex, 'Age');
    // You can also get cell by rowID if primary key is defined
    // const cell = this.treeGrid.getCellByKey(rowID, 'Age');
    cell.update(9999);
}
typescript

    셀 편집 템플릿

    ​일반 편집 항목에서 기본 셀 편집 템플릿에 대해 자세히 알아보고 확인할 수 있습니다.

    셀에 적용될 사용자 정의 템플릿을 제공하려는 경우 해당 템플릿을 셀 자체나 헤더에 전달할 수 있습니다. 먼저 평소와 같이 열을 만듭니다.

    <igc-column
    field="Category"
    data-type="string"
    editable="true"
    id="column1">
</igc-column>
html

    index.ts 파일의 이 열에 템플릿을 전달합니다.

    
constructor() {
    var treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
    var column1 = document.getElementById('column1') as IgcColumnComponent;

    treeGrid.data = this.webGridCellEditSampleRoleplay;
    column1.inlineEditorTemplate = this.webGridCellEditCellTemplate;
    column2.inlineEditorTemplate = this.webGridCellEditCellTemplate;
    column3.inlineEditorTemplate = this.webGridCellEditCellTemplate;
}

public webGridCellEditCellTemplate = (ctx: IgcCellTemplateContext) => {
    let cellValues: any = [];
    let uniqueValues: any = [];
    for(const i of (this.webGridCellEditSampleRoleplay as any)){
        const field: string = ctx.cell.column.field;
        if(uniqueValues.indexOf(i[field]) === -1 )
        {
            cellValues.push(html`<igc-select-item value=${i[field]}>${(i[field])}</igc-select-item>`);
            uniqueValues.push(i[field]);
        }
    }
    return html`
    <igc-select style="width:100%; height:100%" size="large" @igcChange=${(e: any) => ctx.cell.editValue = e.detail.value}>
            ${cellValues}
    </igc-select>
    `;
}
ts

    추가 참조를 위해 위의 작업 샘플을 여기에서 찾을 수 있습니다.

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    Ignite UI for Web Components | CTA 배너

    CRUD 작업

    일부 CRUD 작업을 수행하면 필터링, 정렬, 그룹화 등 적용된 모든 파이프가 다시 적용되고 뷰가 자동으로 업데이트된다는 점을 명심하세요.

    The IgcTreeGridComponent provides a straightforward API for basic CRUD operations.

    새 레코드 추가

    ​IgcTreeGridComponent 구성 요소는 제공된 데이터를 데이터 소스 자체에 추가하는 addRow 메서드를 노출합니다.

    public addNewChildRow() {
    // Adding a new record
    // Assuming we have a `getNewRecord` method returning the new row data
    // And specifying the parentRowID.
    const record = this.getNewRecord();
    this.treeGrid.addRow(record, 1);
}
typescript

    트리 그리드의 데이터 업데이트

    트리 그리드의 데이터 업데이트는 updateRow 및 updateCell 메소드를 통해 이루어지지만 그리드의 PrimaryKey가 정의된 경우에만 가능합니다. 또한 해당 업데이트 방법을 통해 셀 및/또는 행 값을 직접 업데이트할 수도 있습니다.

    // Updating the whole row
this.treeGrid.updateRow(newData, this.selectedCell.cellID.rowID);

// Just a particular cell through the Tree Grid API
this.treeGrid.updateCell(newData, this.selectedCell.cellID.rowID, this.selectedCell.column.field);

// Directly using the cell `update` method
this.selectedCell.update(newData);

// Directly using the row `update` method
const row = this.treeGrid.getRowByKey(rowID);
row.update(newData);
typescript

    트리 그리드에서 데이터 삭제

    ​deleteRow 메소드는 primaryKey가 정의된 경우에만 지정된 행을 제거한다는 점을 명심하십시오.

    // Delete row through Tree Grid API
this.treeGrid.deleteRow(this.selectedCell.cellID.rowID);
// Delete row through row object
const row = this.treeGrid.getRowByIndex(rowIndex);
row.delete();
typescript

    편집 이벤트에 대한 셀 유효성 검사

    ​IgcTreeGridComponent의 편집 이벤트를 사용하면 사용자가 IgcTreeGridComponent와 상호 작용하는 방식을 변경할 수 있습니다.

    이 예에서는 CellEdit 이벤트에 바인딩하여 입력된 데이터를 기반으로 셀의 유효성을 검사합니다. 셀의 새 값이 사전 정의된 기준을 충족하지 않는 경우 이벤트를 취소하여 데이터 소스에 도달하지 못하게 합니다.

    가장 먼저 해야 할 일은 그리드의 이벤트에 바인딩하는 것입니다.

    constructor() {
    var treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
    this.webTreeGridCellEdit = this.webTreeGridCellEdit.bind(this);
    treeGrid.addEventListener("cellEdit", this.webTreeGridCellEdit);
}
typescript

    ​CellEdit​ ​셀의 값이 커밋되려고 할 때마다 내보냅니다. CellEdit 정의에서 조치를 취하기 전에 특정 열을 확인해야 합니다.

    public webTreeGridCellEdit(event: CustomEvent<IgcGridEditEventArgs>): void {
    const column = event.detail.column;
    		
    if (column.field === 'Age') {
        if (event.detail.newValue < 18) {
            event.detail.cancel = true;
            alert('Employees must be at least 18 years old!');
        }
    } else if (column.field === 'HireDate') {
        if (event.detail.newValue > new Date().getTime()) {
            event.detail.cancel = true;
            alert('The employee hire date must be in the past!');
        }
    }
}

typescript

    ​Age 열 아래의 셀에 입력된 값이 18 미만이거나 HireDate 열의 값이 미래인 경우 편집이 취소되고 사용자에게 취소에 대한 경고가 표시됩니다.

    ​IgcTreeGridComponent에 적용된 위의 유효성 검사 결과는 아래 데모에서 볼 수 있습니다.

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    스타일링

    사전 정의된 테마 외에도 사용 가능한 CSS 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다. 일부 색상을 변경하려면 먼저 그리드에 대한 클래스를 설정해야 합니다.

    <igc-tree-grid class="treeGrid"></igc-tree-grid>
html

    그런 다음 해당 클래스에 대한 관련 CSS 속성을 설정합니다.

    .treeGrid {
    --ig-grid-edit-mode-color: orange;
    --ig-grid-cell-editing-background: lightblue;
}
css

    스타일링 예시

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    API 참조

    추가 리소스