데이터 입력 이벤트
리포트 시트(ReportSheet)는 보고서 데이터가 변경되거나 제출될 때 바인딩할 수 있는 데이터 입력 이벤트를 제공합니다. SpreadJS는 이러한 데이터 입력 이벤트를 통해 모든 데이터 변경 사항을 유효성 검사하거나 입력 작업을 취소할 수 있도록 하며, 서버로부터의 피드백 결과를 UI에서 확인할 수 있도록 해줍니다.
getChanges 메서드를 사용하여 리포트 시트의 업데이트, 삽입, 삭제된 레코드 변경 사항을 가져올 수 있습니다. 다음 코드 샘플은 리포트 시트의 업데이트 및 삭제 변경 사항을 반환하는 예입니다:
const report = spread.addSheetTab(0, "Report", GC.Spread.Sheets.SheetType.reportSheet);
report.renderMode("Design");
const templateSheet = report.getTemplate();
templateSheet.setTemplateCell(0, 0, {
binding: "Orders[orderId]",
type: "Group",
});
templateSheet.setTemplateCell(0, 1, {
binding: "Orders[customerId]",
type: "Group",
});
templateSheet.setDataEntrySetting([ {
name: "Write Back Rule 1",
tableName: "Orders",
fields: [
{ dbColumnName: "orderId", formula: "A1", isPrimary: true },
{ dbColumnName: "customerId", formula: "B1" },
],
includeUnmodified: false,
skipRecordWithEmptyValue: false
} ]);
report.renderMode("Preview");
// 아래 작업을 UI에서 수행하면 이벤트가 발생합니다.
report.updateCellValue(0, 1, "test");
report.addRecordAt(1, 0);
report.updateCellValue(2, 0, 111);
report.updateCellValue(2, 1, "test2");
report.deleteRecordAt(3, 0);
report.getChanges(); // "Write Back Rule 1" dataEntrySetting에 따라 한 개 삭제된 레코드와 두 개 업데이트된 레코드를 반환합니다.참고:
getChanges메서드는 data entry의 WriteBackRule에 있는 셀 값만 수집합니다.해당 정보는 ReportSheet의 셀에서 수집되며, WriteBackRule의 필드 값이 셀이 아닐 경우, 필드 정보는
undefined가 되며entity는 전체 레코드 값을 포함합니다.
getChanges는 WriteBackRule에서 수집된 모든 레코드를 반환하며, 변경 사항이 없으면 빈 레코드와 삭제된 레코드가 포함된 writeBackRule을 반환합니다.
리포트 시트는 다음 데이터 입력 이벤트를 지원합니다:
ReportSheetDataChanging 및 ReportSheetDataChanged
ReportSheetDataChanging: 보고서 시트가 업데이트, 삽입 또는 삭제로 인해 변경되기 전에 발생합니다. 이 이벤트에서는 데이터 작업의 유효성 검사 또는 작업 취소가 가능합니다.
ReportSheetDataChanged: 보고서 시트 데이터가 업데이트, 삽입 또는 삭제된 후에 발생합니다. 이 이벤트에서는 데이터 변경 사항을 서버에 제출할 수 있습니다.
이 예제는 ReportSheetDataChanging 및 ReportSheetDataChanged 이벤트를 사용합니다:
const report = spread.addSheetTab(0, "Report", GC.Spread.Sheets.SheetType.reportSheet);
report.renderMode("Design");
const templateSheet = report.getTemplate();
templateSheet.setTemplateCell(0, 0, {
binding: "Orders[orderId]",
type: "Group",
showCollapseButton: true
});
templateSheet.setTemplateCell(0, 1, {
binding: "Orders[customerId]",
type: "Group",
});
templateSheet.setDataEntrySetting([ {
name: "Write Back Rule 1",
tableName: "Orders",
fields: [
{ dbColumnName: "orderId", formula: "A1", isPrimary: true },
{ dbColumnName: "customerId", formula: "B1" },
],
includeUnmodified: false,
skipRecordWithEmptyValue: false
} ]);
report.bind(GC.Spread.Sheets.Events.ReportSheetDataChanging, (event, args) => {
let { type, row, col, oldValue, newValue } = args;
if (allowChange(oldValue, newValue)) { // 유효성 검사
console.log(`Changing row: ${row}, col: ${col} from ${oldValue} to ${newValue}`);
} else {
args.cancel = true; // 변경 취소
}
});
report.bind(GC.Spread.Sheets.Events.ReportSheetDataChanged, (event, args) => {
let changes = report.getChanges(); // 변경 사항 가져오기
if (needSubmit(changes)) {
report.submit(); // 변경 사항 제출
} else {
report.refresh(); // 리포트 새로고침
}
});
// UI에서 데이터 입력 작업 수행
report.renderMode("Preview");
report.updateCellValue(0, 1, "test");
report.addRecordAt(1, 0);
report.updateCellValue(2, 0, 111);
report.updateCellValue(2, 1, "test2");
report.deleteRecordAt(3, 0);참고:
셀 값을 편집할 때
oldValue와newValue가 동일하면ReportSheetDataChanging,ReportSheetDataChanged이벤트는 발생하지 않습니다.셀 업데이트(삭제 키 누름, 붙여넣기, 값 재설정 등), 레코드 추가 또는 삭제 등의 작업은 이 이벤트들을 발생시킵니다.
ReportSheetRecordsSubmitting 및 ReportSheetRecordsSubmitted
ReportSheetRecordsSubmitting: 보고서 시트가 서버에 변경 사항을 제출하기 전에 발생합니다. 모든 데이터 변경 사항을 최종 유효성 검사하거나 작업을 취소할 수 있습니다.
ReportSheetRecordsSubmitted: 보고서 시트가 서버에 변경 사항을 제출한 후 발생합니다. 서버에서 반환된 제출 결과를 UI에 반영할 수 있습니다.
이 예제는 ReportSheetRecordsSubmitting 및 ReportSheetRecordsSubmitted 이벤트를 사용합니다:
const report = spread.addSheetTab(0, "Report", GC.Spread.Sheets.SheetType.reportSheet);
report.renderMode("Design");
const templateSheet = report.getTemplate();
templateSheet.setTemplateCell(0, 0, {
binding: "Orders[orderId]",
type: "Group",
showCollapseButton: true
});
templateSheet.setTemplateCell(0, 1, {
binding: "Orders[customerId]",
type: "Group",
});
templateSheet.setDataEntrySetting([ {
name: "Write Back Rule 1",
tableName: "Orders",
fields: [
{ dbColumnName: "orderId", formula: "A1", isPrimary: true },
{ dbColumnName: "customerId", formula: "B1" },
],
includeUnmodified: false,
skipRecordWithEmptyValue: false
} ]);
// 제출 전 유효성 검사
reportsheet.bind(GC.Spread.Sheets.Events.ReportSheetRecordsSubmitting, (event, args) => {
let changes = args.sheet.getChanges(); // get reportSheet all changes.
for (let change of changes) {
let { records, deleteRecords, rule } = change;
let updateRecordsData = records.map((r) => r.entity), deleteRecordsData = deleteRecords.map((r) => r.entity);
let tableName = rule.tableName;
if (isInvalidData(updateRecordsData, tableName)) {
//제출 취소
args.cancel = true;
break;
}
}
});
// 서버 제출 결과 UI 피드백 처리
reportsheet.bind(GC.Spread.Sheets.Events.ReportSheetRecordsSubmitted, (event, args) => {
let { updateSuccessRecords, deleteSuccessRecords, updateFailedRecords, deleteFailedRecords } = args;
for (let record of updateFailedRecords) {
for (let fieldKey in record.info) {
if (record.info.hasOwnproperty(fieldKey)) {
let recordDetail = record.info[fieldKey];
if (recordDetail.state === "updated") {
// user console the failed detail info.
console.log(`Updated failed in row: ${recordDetail.row} col: ${recordDetail.col}, oldValue: ${recordDetail.oldValue}, reason is ${record.reason}`);
}
}
}
}
});
// Data entry operations by UI.
report.renderMode("Preview");
report.updateCellValue(0, 1, "test");
report.addRecordAt(1, 0);
report.updateCellValue(2, 0, 111);
report.updateCellValue(2, 1, "test2");
report.deleteRecordAt(3, 0);
report.submit();참고:
보고서를 제출할 때
ReportSheetRecordsSubmitting이벤트는 항상 발생합니다.하지만 변경된 레코드와 삭제된 레코드가 모두 비어 있으면
ReportSheetRecordsSubmitted이벤트는 발생하지 않습니다.