스프레드시트 변경 사항 저장
다음 섹션에서는 스프레드시트에서 이루어진 변경 사항을 저장하는 방법과 스프레드시트를 새로고침하여 모든 변경 사항을 삭제하는 방법을 설명합니다.
1단계: 스프레드시트 수정 및 보호하기
데이터 소스 바인딩 섹션에서 만든 refresh 함수 수정합니다. loadTable 함수를 호출한 후, suspendDirty와 resumeDirty 메서드를 실행하여 F열에 대한 변경 사항이 저장되지 않도록 합니다.
스프레드시트의 F1 셀에 값, 배경색, 그리고 가로 정렬을 설정합니다.
스프레드시트를 보호하려면 isProtected 옵션을 true로 설정합니다.
셀 잠금을 방지하려면 locked 메서드를 false로 설정합니다.
//1: suspendDirty와 resumeDirty 메서드 사이에서 값(value), 배경색(backcolor), 가로 정렬(halign)을 설정한 뒤, 시트를 보호하고 F열을 잠급니다. function refresh() { var ss = GC.Spread.Sheets.findControl(document.getElementById("ss")); // 활성 시트 가져오기 var sheet = ss.getActiveSheet(); // 시트를 초기화하고 열 개수를 설정합니다. sheet.reset(); sheet.setColumnCount(7); // 샘플 데이터를 사용해 테이블을 Spread 인스턴스에 불러옵니다. var data = createSampleData(); loadTable(ss, data); // suspendDirty와 resumeDirty 메서드 사이에서 값(value), 배경색(backcolor), 가로 정렬(halign)을 설정합니다. // 변경 감지를 일시 중지합니다. sheet.suspendDirty(); // F1 셀에 값, 배경색, 그리고 가로 정렬을 설정합니다. sheet .getCell(0, 5) .backColor("yellow") .value("Changes") .hAlign(GC.Spread.Sheets.HorizontalAlign.center); // 변경 감지를 다시 시작합니다. sheet.resumeDirty(); // 시트를 보호하고 F열을 잠급니다. sheet.options.isProtected = true; // 4.1) 시트의 기본 스타일을 셀 잠금 해제로 설정합니다. var s = sheet.getDefaultStyle(); s.locked = false; sheet.setDefaultStyle(s); // 4.1) 변경된 값과 이전 값을 표시하기 위해 F열(열 인덱스 5)을 잠금 설정합니다. sheet.getRange(-1, 5, -1, 1).locked(true);refresh함수를 실행하는Refresh버튼을 HTML에 만듭니다.<!--refresh 버튼 생성--> <input type="button" value="Refresh" onclick="refresh()" />
2단계: 변경된(Dirty) 셀 정보 가져오기
showChanges함수를 만들어getDirtyCells와hasPendingChanges메서드를 사용해 변경된(Dirty) 셀과 대기 중인 변경 사항 정보를 가져옵니다.row, col, rowCount, colCount 정보를 저장할 dirtyDataArray 배열을 생성합니다.
setValue 메서드를 사용해 F열 셀의 값을 설정합니다. 이 값에는 변경된(Dirty) 셀의 이전 값과 새로운 값이 표시되도록 합니다.
// Step 2: showChanges() 함수 생성 function showChanges(ss, row, col, rowCount, colCount) { // 활성 시트 가져오기 var sheet = ss.getActiveSheet(); // 활성 시트에 대기 중인 변경 사항이 있을 경우 if (sheet.hasPendingChanges()) { // 페인트(Paint), 이벤트(Event), 변경 감지(Dirty)를 일시 중지합니다. ss.suspendPaint(); ss.suspendEvent(); sheet.suspendDirty(); // 변경된(Dirty) 셀 목록을 dirtyDataArray라는 데이터 배열에 저장합니다. var dirtyDataArray = sheet.getDirtyCells(row, col, rowCount, colCount); // 'F'열에 대한 변경 사항은 건너뜁니다. for (var i = 0; i < dirtyDataArray.length; i++) { // 더러운 셀 데이터를 더러운 데이터 배열에 저장합니다. var dirtyCell = dirtyDataArray[i]; // dirtyDataArray 값에서 이전 값과 새로운 값을 표시합니다. // row index → dirtyCell.row는 변경이 일어난 행의 인덱스를 반환합니다. // column index → 5는 F열에 해당하는 열 인덱스입니다. sheet.setValue( dirtyCell.row, 5, "old: " + dirtyCell.oldValue + ", new: " + dirtyCell.newValue ); } // 페인트(Paint), 이벤트(Event), 변경 감지(Dirty)를 다시 시작합니다. sheet.resumeDirty(); ss.resumeEvent(); ss.resumePaint(); } }
3단계: 변경된(Dirty) 셀 값 표시하기
CellChanged와 RangeChanged 이벤트를 활성 시트에 바인딩하여 스프레드시트가 수정될 때마다 showChange 함수를 실행합니다.
// 3단계: CellChanged와 RangeChanged 이벤트를 시트에 바인딩하기
$(document).ready(function () {
// Spread 초기화
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
// refresh 함수 호출
refresh();
// CellChanged 바인딩하기
spread.bind(GC.Spread.Sheets.Events.CellChanged, function (event, data) {
var row = data.row,
col = data.col;
if (
data.propertyName !== "value" ||
row === undefined ||
col === undefined
) {
return;
}
// showChanged 함수 실행하기
showChanges(spread, row, col);
});
// RangeChanged 바인딩하기
spread.bind(GC.Spread.Sheets.Events.RangeChanged, function (event, data) {
var row = data.row,
col = data.col,
rowCount = data.rowCount,
colCount = data.colCount;
if (
row === undefined ||
col === undefined ||
rowCount === undefined ||
colCount === undefined
) {
return;
}
// showChanged 함수 실행하기
showChanges(spread, row, col, rowCount, colCount);
});
});이전 값과 새로운 값은 F열에 표시됩니다. 또한, F열은 잠겨 있어 그 내용을 수정할 수 없습니다. 변경 사항을 제거하려면 새로 고침 버튼을 사용하여 스프레드시트 인스턴스를 새로 고칠 수 있습니다. 위 코드의 출력은 아래와 같이 나타납니다:
다음 섹션에서는 스프레드시트 변경 사항을 데이터베이스에 저장하는 단계를 설명합니다.
참고: SpreadJS는 데이터베이스를 직접 업데이트하지 않지만, 다음 방법을 통해 변경된 데이터를 가져와 데이터베이스를 적절히 업데이트할 수 있습니다.
1단계: 변경된(Dirty) 셀 정보를 가져오고 이를 JSON 문자열로 변환하기
saveToDB 함수를 생성하고 getDirtyCells 메서드를 사용하여 변경된(dirty) 셀에 대한 정보를 가져옵니다.
JSON.stringify 메서드를 사용하여 변경된(dirty) 셀 정보를 JSON 문자열로 변환합니다.
//1: saveToDB() 함수 생성 function saveToDB() { // DOM 요소 "ss"에서 활성 시트를 가져옵니다. var ss = GC.Spread.Sheets.findControl(document.getElementById("ss")); var sheet = ss.getActiveSheet(); // 변경된 셀 정보를 dirtyCells 변수에 저장합니다. var dirtyCells = sheet.getDirtyCells(); // Step 2에서 생성된 HTML <div> 요소 "msg"를 id로 가져옵니다. var div = document.getElementById("msg"); // 변경된 셀 정보를 시각화하기 위해 JSON 문자열을 <div> 요소에 표시합니다. div.innerHTML = JSON.stringify(dirtyCells, null, 4); // 참고: 변경 사항을 데이터베이스에 게시합니다. }
2단계: 변경 사항을 데이터베이스에 저장하기
SpreadJS
<div>요소 뒤에 JSON 문자열을 표시할 수 있도록msgID를 가진 HTML<div>요소를 생성합니다.Save to DB라는 입력 버튼을 생성하고, 이 버튼을 클릭할 때saveToDB함수가 호출되도록 합니다. 변경 사항이 캡처되어 JSON 문자열로 변환된 후,msgID를 가진<div>요소에 표시됩니다.새로운 HTML
<body>는 모든 버튼과<div>요소를 포함하여 아래와 같이 보일 것입니다:<body> <h1>Save changes made to the spreadsheet to a database</h1> <p> During this section we will create a Save to DB button and a DIV to display the changes as a JSON string when the Save to DB button is clicked. </p> <!-- refresh 버튼 생성--> <input type="button" value="Refresh" onclick="refresh()" /> <!-- Save to DB <div> 와 버튼 생성 --> <input type="button" value="Save to DB" onclick="saveToDB()" /> <br /> <br /> <div id="ss" style="height:400px;width:900px"></div> <!-- <div> 번경 --> <div class="options-container"> <h4> Changes saved to database: </h4> <div id="msg" style="width: 100%; height: 260px; border: 1px solid grey;"></div> </div> </body>
변경 사항이 포함된 JSON 문자열은 아래와 같이 출력되며, 데이터베이스에 게시됩니다.
