이벤트
ReportSheet에는 보고서 데이터를 변경하거나 제출하는 동안 바인딩할 수 있는 데이터 입력 이벤트가 있습니다.
아래 이벤트를 사용하여 사용자는 모든 데이터 변경의 유효성을 검사하거나 데이터 변경 중 작업을 취소할 수 있으며, 서버의 피드백 결과를 받은 다음 UI에 결과를 표시할 수도 있습니다.
설명
app.js
index.html
styles.css
새 창에서 데모를 열어 디자이너 열기
ReportSheet는 아래 데이터 입력 이벤트를 지원합니다. 다음 코드를 사용하여 데이터 입력 이벤트를 바인딩할 수 있습니다.
- 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)) { // user validate this changing operation here.
console.log(`Changing row: ${row}, col: ${col} from ${oldValue} to ${newValue}`);
} else {
args.cancel = true; // user cancel this operation here.
}
});
report.bind(GC.Spread.Sheets.Events.ReportSheetDataChanged, (event, args) => {
let changes = report.getChanges(); // user can get all report changes here.
if (needSubmit(changes)) {
report.submit(); // submit changes.
} else {
report.refresh(); // restore report.
}
});
// 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);
- ReportSheetRecordsSubmitting 및 ReportSheetRecordsSubmitted
ReportSheetRecordsSubmitting는 보고서 시트가 서버에 변경 사항을 제출하기 전에 발생합니다. 모든 데이터 변경 사항의 최종 유효성을 검사하거나 작업을 취소하도록 허용합니다.
ReportSheetRecordsSubmitted는 보고서 시트가 서버에 변경 사항을 제출한 후에 발생합니다. 사용자가 서버의 제출 결과에 대한 UI 피드백을 제공하도록 허용합니다.
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
} ]);
// For some users want to validate the data before submitting to server. They can use the ReportSheetRecordsSubmitting event.
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)) { // users validate data.
//cancel the reportsheet submit operation.
args.cancel = true;
break;
}
}
});
// For some users want to customize the submit result callback, they can use the ReportSheetRecordsSubmitted event to get the successed and failed result.
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();