Web Components 계층적 그리드의 Ignite UI for Web Components 셀 편집 기능을 사용하면 레코드 만들기, 업데이트 및 삭제와 같은 데이터 조작 작업을 쉽게 수행할 수 있습니다. IgcHierarchicalGridComponent 이러한 작업이 수행되는 방식을 사용자 지정할 수 있는 강력한 공개 API를 제공합니다. 데이터 조작 단계는 다음과 같습니다.
CellEditEnter- 셀 편집 입력을 방지합니다. rowEditable 활성화되면 행 편집이 트리거되지만 셀 편집은 계속 금지됩니다.
CellEdit- 허용 Cell 및/또는 Row 편집, 완료 버튼 또는 Enter 키를 누르면 값 또는 행 트랜잭션이 커밋되지 않습니다. 셀 편집 및 행 편집은 취소 버튼을 클릭할 때까지 닫히지 않습니다.
RowEdit- 셀 커밋이 가능하지만 전체 행은 불가능합니다. 행은 편집 모드로 유지되며 행 트랜잭션은 열린 것으로 간주됩니다. 완료를 누르면 행이 커밋되거나 닫히지 않습니다. 취소 버튼은 변경 사항을 적용하지 않고 편집 프로세스와 트랜잭션을 닫습니다.
다음 샘플은 실제 편집 실행 순서를 보여줍니다.
EXAMPLE
TS
HTML
CSS
import'igniteui-webcomponents-grids/grids/combined';
import { IgcHierarchicalGridComponent, IgcRowIslandComponent } from'igniteui-webcomponents-grids/grids';
import SingersData from'./SingersData.json';
import { IgcRowSelectionEventArgs, IgcGridEditEventArgs, IgcGridEditDoneEventArgs } from'igniteui-webcomponents-grids/grids';
import"igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import"./index.css";
exportclassSample{
private hierarchicalGrid: IgcHierarchicalGridComponent
private rowIsland: IgcRowIslandComponent
private _bind: () =>void;
constructor() {
var hierarchicalGrid = this.hierarchicalGrid = document.getElementById('hierarchicalGrid') as IgcHierarchicalGridComponent;
this.webHierarchicalGridRendered = this.webHierarchicalGridRendered.bind(this);
this.webHierarchicalGridRowEditEnter = this.webHierarchicalGridRowEditEnter.bind(this);
this.webHierarchicalGridRowEdit = this.webHierarchicalGridRowEdit.bind(this);
this.webHierarchicalGridRowEditDone = this.webHierarchicalGridRowEditDone.bind(this);
this.webHierarchicalGridRowEditExit = this.webHierarchicalGridRowEditExit.bind(this);
this.webHierarchicalGridCellEditEnter = this.webHierarchicalGridCellEditEnter.bind(this);
this.webHierarchicalGridCellEdit = this.webHierarchicalGridCellEdit.bind(this);
this.webHierarchicalGridCellEditExit = this.webHierarchicalGridCellEditExit.bind(this);
var rowIsland = this.rowIsland = document.getElementById('rowIsland') as IgcRowIslandComponent;
this.webRowIslandGridRowEditEnter = this.webRowIslandGridRowEditEnter.bind(this);
this.webRowIslandGridRowEdit = this.webRowIslandGridRowEdit.bind(this);
this.webRowIslandGridRowEditDone = this.webRowIslandGridRowEditDone.bind(this);
this.webRowIslandGridRowEditExit = this.webRowIslandGridRowEditExit.bind(this);
this.webRowIslandGridCellEditEnter = this.webRowIslandGridCellEditEnter.bind(this);
this.webRowIslandGridCellEdit = this.webRowIslandGridCellEdit.bind(this);
this.webRowIslandGridCellEditExit = this.webRowIslandGridCellEditExit.bind(this);
this._bind = () => {
hierarchicalGrid.data = this.singersData;
hierarchicalGrid.addEventListener("rendered", this.webHierarchicalGridRendered);
hierarchicalGrid.addEventListener("rowEditEnter", this.webHierarchicalGridRowEditEnter);
hierarchicalGrid.addEventListener("rowEdit", this.webHierarchicalGridRowEdit);
hierarchicalGrid.addEventListener("rowEditDone", this.webHierarchicalGridRowEditDone);
hierarchicalGrid.addEventListener("rowEditExit", this.webHierarchicalGridRowEditExit);
hierarchicalGrid.addEventListener("cellEditEnter", this.webHierarchicalGridCellEditEnter);
hierarchicalGrid.addEventListener("cellEdit", this.webHierarchicalGridCellEdit);
hierarchicalGrid.addEventListener("cellEditExit", this.webHierarchicalGridCellEditExit);
rowIsland.addEventListener("rowEditEnter", this.webRowIslandGridRowEditEnter);
rowIsland.addEventListener("rowEdit", this.webRowIslandGridRowEdit);
rowIsland.addEventListener("rowEditDone", this.webRowIslandGridRowEditDone);
rowIsland.addEventListener("rowEditExit", this.webRowIslandGridRowEditExit);
rowIsland.addEventListener("cellEditEnter", this.webRowIslandGridCellEditEnter);
rowIsland.addEventListener("cellEdit", this.webRowIslandGridCellEdit);
rowIsland.addEventListener("cellEditExit", this.webRowIslandGridCellEditExit);
}
this._bind();
}
private _singersData: any[] = SingersData;
publicgetsingersData(): any[] {
returnthis._singersData;
}
public webHierarchicalGridRendered(args:any): void {
const hierarchicalGrid = document.getElementById("hierarchicalGrid");
hierarchicalGrid.parentElement.style.display = "flex";
const container = document.createElement("div");
container.id = "container";
container.style.height = "80vh";
container.style.width = "100%";
container.style.overflow = "auto";
hierarchicalGrid.parentElement.appendChild(container);
const title = document.createElement("span");
title.textContent = "Events execution sequence:";
container.appendChild(title);
}
public webHierarchicalGridRowEditEnter(args: CustomEvent<IgcGridEditEventArgs>): void {
let container = document.getElementById("container");
const message = document.createElement("p");
message.textContent = `Hierarchical Grid => 'rowEditEnter' with 'RowID':` + args.detail.rowID;
container.appendChild(message);
}
public webHierarchicalGridRowEdit(args: CustomEvent<IgcGridEditEventArgs>): void {
let container = document.getElementById("container");
const message = document.createElement("p");
message.textContent = `Hierarchical Grid => 'rowEdit'`;
container.appendChild(message);
}
public webHierarchicalGridRowEditDone(args: CustomEvent<IgcGridEditDoneEventArgs>): void {
let container = document.getElementById("container");
const message = document.createElement("p");
message.textContent = `Hierarchical Grid => 'rowEditDone'`;
container.appendChild(message);
}
public webHierarchicalGridRowEditExit(args: CustomEvent<IgcGridEditDoneEventArgs>): void {
let container = document.getElementById("container");
const message = document.createElement("p");
message.textContent = `Hierarchical Grid => 'rowEditExit' << End of cycle >>`;
container.appendChild(message);
}
public webHierarchicalGridCellEditEnter(args: CustomEvent<IgcGridEditEventArgs>): void {
let container = document.getElementById("container");
const message = document.createElement("p");
message.textContent = `Hierarchical Grid => 'cellEditEnter' with 'value':` + args.detail.oldValue, args.detail.cancel;
container.appendChild(message);
}
public webHierarchicalGridCellEdit(args: CustomEvent<IgcGridEditEventArgs>): void {
let container = document.getElementById("container");
const message = document.createElement("p");
message.textContent = `Hierarchical Grid => 'cellEdit' with 'newValue':` + args.detail.newValue, args.detail.cancel;
container.appendChild(message);
}
public webHierarchicalGridCellEditExit(args: CustomEvent<IgcGridEditDoneEventArgs>): void {
let container = document.getElementById("container");
const message = document.createElement("p");
message.textContent = `Hierarchical Grid => 'cellEditExit'`;
container.appendChild(message);
}
public webRowIslandGridRowEditEnter(args: CustomEvent<IgcGridEditEventArgs>): void {
let container = document.getElementById("container");
const message = document.createElement("p");
message.textContent = `Row Island => 'rowEditEnter' with 'RowID':` + args.detail.rowID;
container.appendChild(message);
}
public webRowIslandGridRowEdit(args: CustomEvent<IgcGridEditEventArgs>): void {
let container = document.getElementById("container");
const message = document.createElement("p");
message.textContent = `Row Island => 'rowEdit'`;
container.appendChild(message);
}
public webRowIslandGridRowEditDone(args: CustomEvent<IgcGridEditDoneEventArgs>): void {
let container = document.getElementById("container");
const message = document.createElement("p");
message.textContent = `Row Island => 'rowEditDone'`;
container.appendChild(message);
}
public webRowIslandGridRowEditExit(args: CustomEvent<IgcGridEditDoneEventArgs>): void {
let container = document.getElementById("container");
const message = document.createElement("p");
message.textContent = `Row Island => 'rowEditExit' << End of cycle >>`;
container.appendChild(message);
}
public webRowIslandGridCellEditEnter(args: CustomEvent<IgcGridEditEventArgs>): void {
let container = document.getElementById("container");
const message = document.createElement("p");
message.textContent = `Row Island => 'cellEditEnter' with 'value':` + args.detail.oldValue, args.detail.cancel;
container.appendChild(message);
}
public webRowIslandGridCellEdit(args: CustomEvent<IgcGridEditEventArgs>): void {
let container = document.getElementById("container");
const message = document.createElement("p");
message.textContent = `Row Island => 'cellEdit' with 'newValue':` + args.detail.newValue, args.detail.cancel;
container.appendChild(message);
}
public webRowIslandGridCellEditExit(args: CustomEvent<IgcGridEditDoneEventArgs>): void {
let container = document.getElementById("container");
const message = document.createElement("p");
message.textContent = `Row Island => 'cellEditExit'`;
container.appendChild(message);
}
}
new Sample();
ts
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample ig-typography"><divclass="container fill"><igc-hierarchical-gridauto-generate="false"primary-key="ID"id="hierarchicalGrid"name="hierarchicalGrid"id="hierarchicalGrid"row-editable="true"><igc-columnfield="Artist"header="Artist"data-type="string"></igc-column><igc-columnfield="HasGrammyAward"header="Has Grammy Award"data-type="boolean"></igc-column><igc-columnfield="Debut"header="Debut"data-type="number"></igc-column><igc-columnfield="GrammyNominations"header="Grammy Nominations"data-type="number"></igc-column><igc-columnfield="GrammyAwards"header="Grammy Awards"data-type="number"></igc-column><igc-row-islandchild-data-key="Albums"auto-generate="false"name="rowIsland"id="rowIsland"primary-key="Album"row-editable="true"><igc-columnfield="Album"header="Album"data-type="string"></igc-column><igc-columnfield="LaunchDate"header="Launch Date"data-type="date"></igc-column><igc-columnfield="BillboardReview"header="Billboard Review"data-type="string"></igc-column><igc-columnfield="USBillboard200"header="US Billboard 200"data-type="string"></igc-column></igc-row-island></igc-hierarchical-grid></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.
기능 통합
셀/행이 편집 모드에 있는 동안 사용자는 다양한 방법으로 그리드와 상호 작용할 수 있습니다. 다음 표에서는 특정 상호 작용이 현재 편집에 어떤 영향을 미치는지 지정합니다.
계층 그리드
필터링
정렬
페이징
움직이는
고정
숨김
그룹화 기준
크기 조정
탈출하다
입력하다
F2
탭
셀 클릭
새 행 추가/삭제/수정
편집 모드 유지
✔
편집 모드 종료
✔
✔
✔
✔
✔
✔
✔
✔
✔
✔
✔
✔
✔
저지르다
✔
✔
✔
✔
✔
버리다
✔
✔
✔
✔
✔
✔
✔
✔
표에서 볼 수 있듯이 열 크기 조정을 제외한 모든 상호 작용은 편집을 종료하고 새 값을 삭제합니다. 새 값이 커밋되어야 하는 경우 개발자는 해당 기능 "-ing" 이벤트에서 이를 수행할 수 있습니다.
셀/행이 편집 모드에 있는 동안 사용자가 열을 정렬하려고 시도하는 경우 새 값을 커밋하는 방법의 예: