계층적 그리드 구성 요소 Ignite UI for Angular CRUD 작업을 Angular 위한 뛰어난 데이터 조작 기능과 강력한 API를 제공합니다. 기본적으로 Hierarchical Grid는 셀 편집에 사용되며 기본 셀 편집 템플릿 덕분에 열 데이터 유형에 따라 다른 편집기가 표시됩니다. 또한 update-data 작업에 대한 사용자 지정 템플릿을 정의하고 변경 사항을 커밋 및 삭제하기 위한 기본 동작을 재정의할 수 있습니다.
最速で機能豊富な Angular Data Grid は、ページング、ソート、フィルタリング、グループ化、PDF および Excel へのエクスポートなどの機能を提供します。究極のアプリ構築エクスペリエンスとデータ操作に必要なすべてが揃っています。
이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.
사용하여 igxCellEditor 모든 유형의 편집기 구성 요소를 사용하면 키보드 탐색 흐름이 중단됩니다. 편집 모드로 들어가는 사용자 정의 셀을 직접 편집하는 경우에도 마찬가지입니다. 이는 focus에 남아있을 것이다 cell element, 우리가 추가한 편집기 구성요소에는 없습니다. igxSelect, igxCombo 등. 이것이 바로 우리가 다음을 활용해야 하는 이유입니다. igxFocus 지시문은 셀 내 구성 요소에서 직접 포커스를 이동하고 보존합니다. a fluent editing flow 셀/행의
셀 편집
UI를 통한 편집
다음 방법 중 하나로 편집 가능한 셀에 초점이 맞춰지면 특정 셀에 대한 편집 모드로 들어갈 수 있습니다.
두 번 클릭하면;
한 번 클릭 시 - 이전에 선택한 셀이 편집 모드이고 현재 선택한 셀이 편집 가능한 경우에만 한 번 클릭하면 편집 모드로 들어갑니다. 이전에 선택한 셀이 편집 모드가 아닌 경우 한 번 클릭하면 편집 모드로 들어가지 않고 셀이 선택됩니다.
키를 누르면 Enter;
키를 누르면 F2;
다음 방법 중 하나로 변경 사항을 커밋하지 않고 편집 모드를 종료할 수 있습니다.
키를 누를 때 Escape;
정렬, 필터링, 검색 및 숨기기 작업을 수행할 때
다음 방법 중 하나로 편집 모드를 종료하고 변경 사항을 커밋 할 수 있습니다.
키를 누르면 Enter;
키를 누르면 F2;
키를 누를 때 Tab;
다른 셀을 한 번 클릭하면 - 계층 그리드에서 다른 셀을 클릭하면 변경 사항이 제출됩니다.
페이징, 크기 조정, 고정 또는 이동과 같은 작업을 수행하면 편집 모드가 종료되고 변경 사항이 제출됩니다.
수직 또는 수평으로 스크롤하거나 계층 그리드 외부를 클릭하면 셀은 편집 모드로 유지됩니다. 이는 셀 편집과 행 편집 모두에 유효합니다.
API를 통한 편집
IgxHierarchicalGrid API를 통해 셀 값을 수정할 수도 있지만 기본 키가 정의된 경우에만 가능합니다.
publicupdateCell() {
const cell = this.hierarchicalGrid.getCellByColumn(rowIndex, 'ReorderLevel');
// You can also get cell by rowID if primary key is defined// cell = this.hierarchicalGrid.getCellByKey(rowID, 'ReorderLevel');
cell.update(70);
}
typescript
셀이 편집 모드에 있을 때 적용되는 사용자 정의 템플릿을 제공하려면 igxCellEditor 지시문을 사용할 수 있습니다. 이렇게 하려면 igxCellEditor 지시문이 표시된 ng-template 전달하고 사용자 정의 컨트롤을 cell.editValue에 올바르게 바인딩해야 합니다.
<igx-columnfield="class"header="Class" [editable]="true"><ng-templateigxCellEditorlet-cell="cell"let-value><igx-selectclass="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 열.
셀 템플릿 igxCell 편집 모드 외부에서 열의 셀이 표시되는 방식을 제어합니다. 셀 편집 템플릿 지시문 igxCellEditor는 편집 모드에서 열의 셀이 표시되는 방식을 처리하고 편집된 셀의 편집 값을 제어합니다.
사용하여 igxCellEditor 모든 유형의 편집기 구성 요소를 사용하면 키보드 탐색 흐름이 중단됩니다. 편집 모드로 들어가는 사용자 정의 셀을 직접 편집하는 경우에도 마찬가지입니다. 이는 focus에 남아있을 것이다 cell element, 우리가 추가한 편집기 구성요소에는 없습니다. igxSelect, igxCombo 등. 이것이 바로 우리가 다음을 활용해야 하는 이유입니다. igxFocus 지시문은 셀 내 구성 요소에서 직접 포커스를 이동하고 보존합니다. a fluent editing flow 셀/행의
열과 해당 템플릿을 구성하는 방법에 대한 자세한 내용은 그리드 열 구성 설명서를 참조하세요.
CRUD 작업
일부 CRUD 작업을 수행하면 필터링, 정렬 및 그룹화와 같은 적용된 모든 파이프가 다시 적용되고 보기가 자동으로 업데이트된다는 점을 명심하세요.
Hierarchical Grid 구성 요소는 제공된 데이터를 데이터 소스 자체에 추가하는 addRow 메서드를 노출합니다.
publicaddRow() {
// Adding a new record// Assuming we have a `getNewRecord` method returning the new row dataconst record = this.getNewRecord();
this.hierarchicalGrid.addRow(record, 1);
}
typescript
계층형 그리드의 데이터 업데이트
계층적 그리드의 데이터 업데이트는 updateRow 및 updateCell 메소드를 통해 이루어지지만 그리드의 기본 키가 정의된 경우에만 가능합니다. 또한 해당 update 방법을 통해 셀 및/또는 행 값을 직접 업데이트할 수도 있습니다.
// Updating the whole rowthis.hierarchicalGrid.updateRow(newData, this.selectedCell.cellID.rowID);
// Just a particular cell through the Grid APIthis.hierarchicalGrid.updateCell(newData, this.selectedCell.cellID.rowID, this.selectedCell.column.field);
// Directly using the cell `update` methodthis.selectedCell.update(newData);
// Directly using the row `update` methodconst row = this.hierarchicalGrid.getRowByKey(rowID);
row.update(newData);
typescript
계층형 그리드에서 데이터 삭제
deleteRow() 메소드는 기본 키가 정의된 경우에만 지정된 행을 제거한다는 점을 명심하십시오.
// Delete row through Grid APIthis.hierarchicalGrid.deleteRow(this.selectedCell.cellID.rowID);
// Delete row through row objectconst row = this.hierarchicalGrid.getRowByIndex(rowIndex);
row.delete();
typescript
이는 반드시 igx-hierarchical-grid와 관련될 필요는 없지만 사용자 상호 작용에 연결될 수 있습니다. 예를 들어 버튼을 클릭하면 다음과 같습니다.
그리드의 편집 이벤트를 사용하면 사용자가 그리드와 상호 작용하는 방식을 변경할 수 있습니다. 이 예에서는 cellEdit 이벤트에 바인딩하여 입력된 데이터를 기반으로 셀의 유효성을 검사합니다. 셀의 새 값이 사전 정의된 기준을 충족하지 않는 경우 이벤트를 취소하여(event.cancel = true) 데이터 소스에 도달하지 못하게 합니다. 또한 IgxToast 사용하여 사용자 정의 오류 메시지를 표시합니다.
cellEdit은 셀의 값이 커밋되려고 할 때마다 내보냅니다. handleCellEdit 정의에서 조치를 취하기 전에 특정 열을 확인해야 합니다.
exportclassMyHGridEventsComponent{
publichandleCellEdit(event: IGridEditEventArgs) {
const today = newDate();
const column = event.column;
if (column.field === 'Debut') {
if (event.newValue > today.getFullYear()) {
this.toast.message = 'The debut date must be in the past!';
this.toast.open();
event.cancel = true;
}
} elseif (column.field === 'LaunchDate') {
if (event.newValue > newDate()) {
this.toast.message = 'The launch date must be in the past!';
this.toast.open();
event.cancel = true;
}
}
}
}
typescript
여기서는 두 개의 열을 검증합니다. 사용자가 아티스트의 데뷔 연도나 앨범의 출시 날짜를 변경하려고 하면 그리드에서는 오늘보다 이후의 날짜를 허용하지 않습니다.
igx-hierarchical-grid에 적용된 위의 검증 결과는 아래 데모에서 볼 수 있습니다.
EXAMPLE
TS
HTML
SCSS
import { Component, OnDestroy, OnInit, ViewChild } from'@angular/core';
import { IGridCreatedEventArgs, IGridEditEventArgs, IgxHierarchicalGridComponent, IgxToastComponent, VerticalAlignment, IgxColumnComponent, IgxRowIslandComponent } from'igniteui-angular';
import { Subject } from'rxjs';
import { takeUntil } from'rxjs/operators';
import { SINGERS } from'../../data/singersData';
import { Singer } from'../models';
import { IgxPreventDocumentScrollDirective } from'../../directives/prevent-scroll.directive';
@Component({
selector: 'app-hierarchical-grid-editing-events',
styleUrls: ['./hierarchical-grid-editing-events.component.scss'],
templateUrl: 'hierarchical-grid-editing-events.component.html',
imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent, IgxToastComponent]
})
exportclassHGridEditingEventsComponentimplementsOnInit, OnDestroy{
@ViewChild(IgxHierarchicalGridComponent, { read: IgxHierarchicalGridComponent, static: true })
public grid: IgxHierarchicalGridComponent;
@ViewChild(IgxToastComponent, { read: IgxToastComponent, static: true })
public toast: IgxToastComponent;
public localData: Singer[];
private destroy$ = new Subject<void>();
constructor() { }
public ngOnInit(): void {
this.localData = SINGERS;
this.toast.positionSettings.verticalDirection = VerticalAlignment.Middle;
}
public ngOnDestroy(): void {
this.destroy$.next();
this.destroy$.complete();
}
public formatter = (a) => a;
publichandleCellEdit(event: IGridEditEventArgs) {
const today = newDate();
const column = event.column;
if (column.field === 'Debut') {
if (event.newValue > today.getFullYear()) {
this.toast.open('The debut date must be in the past!');
event.cancel = true;
}
} elseif (column.field === 'LaunchDate') {
if (event.newValue > newDate()) {
this.toast.open('The launch date must be in the past!');
event.cancel = true;
}
}
}
publichandleCreate(event: IGridCreatedEventArgs) {
event.grid.cellEdit.pipe(takeUntil(this.destroy$)).subscribe((e) =>this.handleCellEdit(e));
}
}
ts
@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
GitHub