[]
        
(Showing Draft Content)

데이터 작업

테이블 시트는 행 단위의 생성(Create), 조회(Read), 수정(Update), 삭제(Delete) 작업을 통해 데이터와 상호작용할 수 있는 기능을 제공합니다. 이러한 작업을 통해 편리하게 수정된 행 데이터를 데이터베이스와 동기화할 수 있습니다.

다음 테이블 시트 클래스 메서드를 통해 행 작업을 수행할 수 있습니다:

메서드

설명

addRow

테이블 시트에 새 행을 추가합니다.

removeRow

지정한 행을 테이블 시트에서 제거합니다.

saveRow

테이블 시트의 특정 행에 대한 변경 사항(수정 및 삽입된 행 포함)을 DataManager에 저장합니다.

resetRow

테이블 시트의 지정된 행에 대한 변경 사항을 초기화합니다.

아래 GIF는 이러한 행 작업이 실행되는 모습을 보여줍니다.


ts-rowoperation

다양한 동기화 보드

테이블 시트는 데이터 매니저와 연동되어 데이터를 관리합니다. 변경된 데이터를 원격 데이터베이스와 동기화하려면 자동 업데이트 또는 일괄 업데이트 기능을 활성화해야 합니다.

addTable 메서드를 사용할 때 아래 두 가지 중 하나의 동기화 모드를 설정할 수 있습니다:

  • autoSync 모드 : 변경 사항을 원격 데이터 소스에 자동으로 실시간 반영하며 데이터 변경이 드물게 발생하는 경우에 적합합니다.

    var myTable = dataManager.addTable("myTable", {
        // ... 다른 설정
        autoSync: true // autoSync 모드 활성화
    });
  • batch 모드 : 변경 사항을 수동으로 submitChanges 메서드를 호출하여 원격 데이터 소스에 반영합니다. 데이터가 자주 조작되는 경우에 적합합니다.

    var myTable = dataManager.addTable("myTable", {
        // ... 다른 설정
        batch: true, // batch 모드 활성화
        remote: {
            // ... 다른 설정
            batch: {
                url: BatchApiUrl // api url 특정
            }
        }
    });
    
    // 모든 변경 사항 저장
    tablesheet.submitChanges();
    // 또는 변경 사항 폐기
    tablesheet.cancelChanges();

원격 요청 사용자 정의

테이블 시트는 원격 요청 옵션을 설정하기 위해 사용자 정의 함수를 지원합니다. 기본적으로 테이블 시트는 원격 요청을 객체로 구성하지만, 요청을 직접 처리하고자 할 경우 객체를 함수로 대체할 수 있으며 데이터 변경 사항은 해당 함수에 전달됩니다.

사용자 정의 함수를 사용할 경우, autoSync 및 batch 모드에서 다음과 같은 파라미터를 가집니다:

  • autoSync: create, update, delete 함수의 파라미터는 데이터 항목이며, 반환값은 원격에서의 데이터 항목을 포함하는 Promise입니다. read 함수의 반환값은 데이터 항목들을 포함하는 Promise입니다.

  • batch: batch 함수의 파라미터는 데이터 변경 사항이며, 함수의 반환값은 원격에서의 성공 정보를 포함하는 Promise입니다.

다음 코드 샘플은 사용자 정의 요청 함수를 생성하고 구현하는 방법을 보여줍니다.

// 사용자 지정 request 함수 
function sendRequest(url, options) {
    options.method = options.method || 'POST';
    options.headers = { 'Content-Type': 'application/json; charset=utf-8' };
    if (options.body) {
        options.body = JSON.stringify(options.body);
    }
    return fetch(url, options).then(resp => {
        if (resp.ok) {
            return resp.json();
        } else {
            throw resp.statusText;
        }
    });
}

//데이터 매니저 생성
var dataManager = spread.dataManager();
myTable = dataManager.addTable("myTable", {
    remote: {
        read: function () {
            return sendRequest(apiUrl, { method: 'GET' });
        },
        update: function (item) {
            return sendRequest(apiUrl, { body: item, method: 'PUT' });
        },
        create: function (item) {
            return sendRequest(apiUrl, { body: item });
        },
        delete: function (item) {
            return sendRequest(apiUrl, { body: item, method: 'DELETE' });
        },
        batch: function (changes) {
            return sendRequest(batchApiUrl, { body: changes });
        }
    },
    batch: true,
    onFailed: function(type, args) {
        console.log("error", type, args);
    }
});

오류 처리

서버에서 연결 오류(예: HTTP 404, HTTP 500) 및 서버 데이터베이스 오류(예: 기본 키 중복, 업데이트 실패)가 반환되면, 테이블 시트는 콜백을 통해 사용자가 이를 처리하거나 오류를 표시할 수 있도록 합니다.

행 머리글에 빨간색 경고 아이콘이 표시되며, 사용자가 아이콘 위에 마우스를 올리면 오류 설명이 표시됩니다.

ts-error

데이터 변경 사항 가져오기

테이블 시트는 변경된 내용을 서버에 저장하기 전에 현재 데이터 뷰에서 변경 사항을 가져오는 기능을 지원합니다. TableSheet 클래스의 getChanges 메서드를 사용하면, 각 동기화 모드에 따라 다음 객체들의 배열을 반환합니다.

  • Data Item: 현재 행 데이터

  • Old Data Item: 원래의 행 데이터 (옵션)

  • Index: 테이블 시트 뷰 인덱스

  • Type of change: 업데이트, 삽입, 삭제 (동기화 모드에 따라 다름)

autoSync 모드에서는 getChanges메서드가 ‘업데이트된 행’ 또는 ‘삽입된 행’ 정보를 반환합니다.

그러나 batch 모드에서는 getChanges메서드가 ‘업데이트된 행’, ‘삽입된 행’, ‘삭제된 행’ 정보를 모두 반환합니다.

tablesheet.getChanges();