Angular 그리드 셀 편집

    Ignite UI for Angular 뛰어난 데이터 조작 기능과 Angular CRUD 작업을 위한 강력한 API를 제공합니다. 기본적으로 Grid는 셀 편집에 사용되며 기본 셀 편집 템플릿 덕분에 열 데이터 유형에 따라 다른 편집기가 표시됩니다. 또한 update-data 작업에 대한 사용자 정의 템플릿을 정의하고 변경 사항을 커밋하고 삭제하기 위한 기본 동작을 재정의할 수 있습니다.

    Angular Grid 셀 편집 및 편집 템플릿 예제

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.

    사용하여 igxCellEditor 모든 유형의 편집기 구성 요소를 사용하면 키보드 탐색 흐름이 중단됩니다. 편집 모드로 들어가는 사용자 정의 셀을 직접 편집하는 경우에도 마찬가지입니다. 이는 focus에 남아있을 것이다 cell element, 우리가 추가한 편집기 구성요소에는 없습니다. igxSelect, igxCombo 등. 이것이 바로 우리가 다음을 활용해야 하는 이유입니다. igxFocus 지시문은 셀 내 구성 요소에서 직접 포커스를 이동하고 보존합니다. a fluent editing flow 셀/행의

    셀 편집

    UI를 통한 편집

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

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

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

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

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

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

    세로 또는 가로로 스크롤하거나 그리드 외부를 클릭하면 셀은 편집 모드로 유지됩니다. 이는 셀 편집과 행 편집 모두에 유효합니다.

    API를 통한 편집

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

    public updateCell() {
    this.grid1.updateCell(newValue, rowID, 'ReorderLevel');
}
typescript

    셀을 업데이트하는 또 다른 방법은 IgxGridCell의 update 방법을 직접 사용하는 것입니다.

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

    셀 편집 템플릿

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

    셀이 편집 모드에 있을 때 적용되는 사용자 정의 템플릿을 제공하려면 igxCellEditor 지시문을 사용할 수 있습니다. 이렇게 하려면 igxCellEditor 지시문이 표시된 ng-template 전달하고 사용자 정의 컨트롤을 cell.editValue에 올바르게 바인딩해야 합니다.

    <igx-column field="class" header="Class" [editable]="true">
    <ng-template igxCellEditor let-cell="cell" let-value>
        <igx-select class="cell-select" [(ngModel)]="cell.editValue" [igxFocus]="true">
            <igx-select-item *ngFor="let class of classes" [value]="class">
                {{ class }}
            </igx-select-item>
        </igx-select>
    </ng-template>
</igx-column>
html

    이 코드는 아래 샘플에서 사용됩니다. IgxSelectComponent 세포에서 Race, Class 그리고 Alignment 열.

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    편집 모드에서 셀의 editValue에 대한 변경 사항은 종료 시 적절한 편집 이벤트를 트리거하고 트랜잭션 상태에 적용됩니다(트랜잭션이 활성화된 경우).

    셀 템플릿 igxCell 편집 모드 외부에서 열의 셀이 표시되는 방식을 제어합니다. 셀 편집 템플릿 지시문 igxCellEditor는 편집 모드에서 열의 셀이 표시되는 방식을 처리하고 편집된 셀의 편집 값을 제어합니다.

    사용하여 igxCellEditor 모든 유형의 편집기 구성 요소를 사용하면 키보드 탐색 흐름이 중단됩니다. 편집 모드로 들어가는 사용자 정의 셀을 직접 편집하는 경우에도 마찬가지입니다. 이는 focus에 남아있을 것이다 cell element, 우리가 추가한 편집기 구성요소에는 없습니다. igxSelect, igxCombo 등. 이것이 바로 우리가 다음을 활용해야 하는 이유입니다. igxFocus 지시문은 셀 내 구성 요소에서 직접 포커스를 이동하고 보존합니다. a fluent editing flow 셀/행의

    열과 해당 템플릿을 구성하는 방법에 대한 자세한 내용은 그리드 열 구성 설명서를 참조하세요.

    그리드 엑셀 스타일 편집

    Excel 스타일 편집을 사용하면 사용자는 Excel을 사용하는 것처럼 셀을 탐색하고 신속하게 편집할 수 있습니다.

    이 사용자 정의 기능을 구현하려면 그리드의 이벤트를 활용하면 됩니다. 먼저 그리드의 keydown 이벤트에 연결하고 거기에서 두 가지 기능을 구현할 수 있습니다.

    • 상수 편집 모드
    public keydownHandler(event) {
  const key = event.keyCode;
  const grid = this.grid;
  const activeElem = grid.navigation.activeNode;

  if(
    (key >= 48 && key <= 57) ||
    (key >= 65 && key <= 90) ||
    (key >= 97 && key <= 122)){
        // Number or Alphabet upper case or Alphabet lower case
        const columnName = grid.getColumnByVisibleIndex(activeElem.column).field;
        const cell = grid.getCellByColumn(activeElem.row, columnName);
        if (cell && !cell.editMode) {
            cell.editMode = true;
            cell.editValue = event.key;
            this.shouldAppendValue = true;
        } else if (cell && cell.editMode && this.shouldAppendValue) {
            event.preventDefault();
            cell.editValue = cell.editValue + event.key;
            this.shouldAppendValue = false;
        }
    }
}
typescript
    • Enter / Shift+Enter 탐색
    if (key == 13) {
    let thisRow = activeElem.row;
    const column = activeElem.column;
    const rowInfo = grid.dataView;

    // to find the next eiligible cell, we will use a custom method that will check the next suitable index
    let nextRow = this.getNextEditableRowIndex(thisRow, rowInfo, event.shiftKey);

    // and then we will navigate to it using the grid's built in method navigateTo
    this.grid.navigateTo(nextRow, column, (obj) => {
        obj.target.activate();
        this.grid.clearCellSelection();
        this.cdr.detectChanges();
    });
}
typescript

    다음 적격 지수를 찾는 주요 부분은 다음과 같습니다.

    //first we check if the currently selected cell is the first or the last
if (currentRowIndex < 0 || (currentRowIndex === 0 && previous) || (currentRowIndex >= dataView.length - 1 && !previous)) {
return currentRowIndex;
}
// in case using shift + enter combination, we look for the first suitable cell going up the field
if(previous){
return  dataView.findLastIndex((rec, index) => index < currentRowIndex && this.isEditableDataRecordAtIndex(index, dataView));
}
// or for the next one down the field
return dataView.findIndex((rec, index) => index > currentRowIndex && this.isEditableDataRecordAtIndex(index, dataView));
typescript

    자세한 내용은 전체 샘플을 확인하세요.

    Angular Grid Excel 스타일 편집 샘플

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    위 접근 방식의 주요 이점은 다음과 같습니다.

    • 지속적인 편집 모드: 셀이 선택된 동안 입력하면 입력된 값으로 즉시 편집 모드로 들어가 기존 값을 대체합니다.
    • ​Enter / Shift+Enter 사용하여 탐색할 때 데이터가 아닌 행은 건너뜁니다. 이를 통해 사용자는 해당 값을 빠르게 순환할 수 있습니다.

    CRUD 작업

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

    ​IgxGridComponent는 기본 CRUD 작업을 위한 간단한 API를 제공합니다.

    새 레코드 추가

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

    // Adding a new record
// Assuming we have a `getNewRecord` method returning the new row data.
const record = this.getNewRecord();
this.grid.addRow(record);
typescript

    그리드에서 데이터 업데이트

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

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

// Just a particular cell through the Grid API
this.grid.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.grid.getRowByKey(rowID);
row.update(newData);
typescript

    그리드에서 데이터 삭제

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

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

    이는 반드시 igx-grid와 관련될 필요는 없지만 사용자 상호 작용에 연결될 수 있습니다. 예를 들어 버튼 클릭은 다음과 같습니다.

    <button igxButton igxRipple (click)="deleteRow($event)">Delete Row</button>
html

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

    그리드의 편집 이벤트를 사용하면 사용자가 그리드와 상호 작용하는 방식을 변경할 수 있습니다. 이 예에서는 cellEdit 이벤트에 바인딩하여 입력된 데이터를 기반으로 셀의 유효성을 검사합니다. 셀의 새 값이 사전 정의된 기준을 충족하지 않는 경우 이벤트를 취소하여(event.cancel = true) 데이터 소스에 도달하지 못하게 합니다. 또한 IgxToast 사용하여 사용자 정의 오류 메시지를 표시합니다.

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

    <igx-grid (cellEdit)="handleCellEdit($event)"
...>
...
</igx-grid>
html

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

    export class MyGridEventsComponent {
    public handleCellEdit(event: IGridEditEventArgs): void {
        const column = event.column;
        if (column.field === 'Ordered') {
            const rowData = event.rowData;
            if (!rowData) {
                return;
            }
            if (event.newValue > rowData.UnitsInStock) {
                event.cancel = true;
                this.toast.open();
            }
        }
    }
}
typescript

    ​주문 열 아래 셀에 입력한 값이 사용 가능한 금액(재고 단위 아래 값)보다 큰 경우 편집이 취소되고 오류 메시지와 함께 토스트가 표시됩니다.

    ​igx-grid에 적용된 위의 검증 결과는 아래 데모에서 볼 수 있습니다.

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    스타일링

    IgxGrid를 사용하면 셀의 스타일을 지정할 수 있습니다 Ignite UI for Angular Theme Library. 그리드는 grid-theme 사용자가 그리드의 다양한 측면을 스타일링할 수 있도록 하는 광범위한 속성을 노출합니다.

    아래 단계에서는 편집 모드에서 그리드 셀의 스타일을 지정하는 방법과 해당 스타일의 범위를 지정하는 방법을 살펴보겠습니다.

    를 Ignite UI Theming Library 사용하려면 먼저 전역 스타일로 테마 index 파일을 가져와야 합니다.

    스타일 라이브러리 가져오기

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
scss

    이제 Ignite UI for Angular에서 제공하는 모든 기능을 활용할 수 있습니다.

    팔레트 정의

    인덱스 파일을 제대로 가져온 후 사용할 수 있는 사용자 지정 팔레트를 만듭니다. 우리가 좋아하는 세 가지 색상을 정의하고 이를 사용하여 팔레트를 만들어 보겠습니다. palette​

    $white: #fff;
$blue: #4567bb;
$gray: #efefef;

$color-palette: palette(
  $primary: $white, 
  $secondary: $blue, 
  $surface: $gray
);
scss

    테마 정의

    이제 팔레트를 사용하여 테마를 정의할 수 있습니다. 셀은 grid-theme로 스타일이 지정되므로 이를 사용하여 IgxGrid에 대한 테마를 생성할 수 있습니다.

    $custom-grid-theme: grid-theme(
  $cell-editing-background: $blue,
  $cell-edited-value-color: $white,
  $cell-active-border-color: $white,
  $edit-mode-color: color($color-palette, "secondary", 200)
);
scss

    테마 적용

    테마를 적용하는 가장 쉬운 방법은 전역 스타일 파일에 sass ​ ​@include 문을 사용하는 것입니다.

    @include grid($custom-grid-theme);
scss

    데모

    위의 단계 외에도 셀의 편집 템플릿에 사용되는 컨트롤의 스타일을 지정할 수도 있습니다. input-group,& datepicker​ ​checkbox

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    샘플은 Change Theme에서 선택한 전역 테마의 영향을 받지 않습니다.

    App Builder | CTA 배너

    API 참조

    추가 리소스