들어가며

이번 강좌는 C6 수정한 데이터 복원하기에 이어 RealGrid의 수정된 데이터를 특정 시점으로 복원하는 방법을 배워보겠습니다.

이론

RealGrid에서 데이터를 특정 시점으로 전체를 되돌리기 위해서는 필요한 특정시점마다 복원지점(savePoint())을 설정해야 합니다. 복원지점은 필요한 만큼 설정할 수 있으나 DataProvider에 저장되어 있는 데이터셋 전체의 복사본을 만드므로 대용량 데이터셋인 경우 많은 복원지점을 설정하는 것은 추천하지 않습니다.

복원지점이 설정되고 난 후 필요에 따라 특정 복원지점으로 복원(rollback())을 하게되면 선택한 특정 복원지점부터 현재(복원 실행전)까지의 데이터 수정건은 모두 롤백되어 없어집니다. 또한 선택한 복원 지점부터 현재(복원 실행전)까지 복원지점을 설정한 것이 있다면 그것 또한 모두 사라집니다.

모든 복원 작업이 완료되고 더 이상 복원 작업이 필요없다고 생각될 때에는 clearSavePoints() 를 사용하여 복제된 데이터셋을 삭제하여 불필요한 메모리 사용을 방지합니다.

데이터를 수정하고 특정시점으로 복원하는 것을 간락하게 요약하면 아래와 같습니다.
  1. savePoint()를 사용하여 복원이 필요한 시점마다 복원시점 만듭니다.
  2. rollback()을 사용하여 지정한 복원시점으로 복원합니다.
  3. clearSavePoints()를 사용하여 불필요한 메모리 사용을 방지합니다.

이 외로 getSavePoints()를 사용하여 현재 생성되어 있는 복원지점의 id를 가져올 수 있습니다.

실습

실습에서는 여러 개의 복원지점을 만들고 어떻게 복원되는지 확인해 보도록 하겠습니다.

  1. 버튼을 클릭하면 savePoint()를 사용하여 복원지점을 만듭니다.

         var id;
         id = dataProvider.savePoint();
     
  2. 그리드의 값을 입력/수정/삭제 합니다.

  3. 1,2번을 반복하여 몇 건의 복원지점을 만듭니다.

  4. 생성된 여러건의 복원지점 중 하나를 선택하여 버튼을 클릭하면 수정되었던 데이터들이 해당 복원지점 시점으로 복원 됩니다.

         dataProvider.rollback(id);
     
  5. 버튼을 클릭하면 clearSavePoints()를 사용하여 복제된 데이터 셋을 삭제합니다.

         dataProvider.clearSavePoints();
     

실행화면

  1. 그리드의 값을 입력/수정/삭제 합니다.

  2. 1,2번을 반복하여 몇 건의 복원지점을 만듭니다.

  3. savePoints:
    버튼을 클릭하여 그리드 데이터들이 복원됐는지 확인하세요.

  4. 모든 복원 지점이 삭제됐는지 확인하세요.

전체 소스코드

SCRIPT
<link rel="stylesheet" href="/css/bootstrap.css">
<script type="text/javascript" src="/script/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="/script/bootstrap.min.js"></script>
<!--realgrid-->
<script type="text/javascript" src="/script/realgridjs-lic.js"></script>
<script type="text/javascript" src="/script/realgridjs_eval.1.0.14.min.js"></script>
<script type="text/javascript" src="/script/realgridjs-api.1.0.14.js"></script>

<script>
var gridView;
var dataProvider;

$(document).ready( function(){
    RealGridJS.setTrace(false);
    RealGridJS.setRootContext("/script");
    
    dataProvider = new RealGridJS.LocalDataProvider();
    gridView = new RealGridJS.GridView("realgrid");
    gridView.setDataSource(dataProvider);

    //필드 배열 객체를 생성합니다.
    var fields = [
        {
            fieldName: "field1"
        },
        {
            fieldName: "field2"
        },
        {
            fieldName: "field3"
        },
        {
            fieldName: "field4"
        },
        {
            fieldName: "field5"
        },
        {
            fieldName: "field6"
        },
        {
            fieldName: "field7"
        },
        {
            fieldName: "field8"
        },
        {
            fieldName: "field9"
        },
        {
            fieldName: "field10"
        }
    ];
    //DataProvider의 setFields함수로 필드를 입력합니다.
    dataProvider.setFields(fields);

    //필드와 연결된 컬럼 배열 객체를 생성합니다.
    var columns = [
        {
            name: "col1",
            fieldName: "field1",
            header : {
                text: "직업"
            },
            width : 60
        },
        {
            name: "col2",
            fieldName: "field2",
            header : {
                text: "성별"
            },
            width: 50
        },
        {
            name: "col3",
            fieldName: "field3",
            header : {
                text: "이름"
            },
            width: 80
        },
        {
            name: "col4",
            fieldName: "field4",
            header : {
                text: "국어"
            },
            width: 80
        },
        {
            name: "col5",
            fieldName: "field5",
            header : {
                text: "수학"
            },
            width: 80
        },
        {
            name: "col6",
            fieldName: "field6",
            header : {
                text: "민법"
            },
            width: 80
        },
        {
            name: "col7",
            fieldName: "field7",
            header : {
                text: "한국사"
            },
            width: 80
        },
        {
            name: "col8",
            fieldName: "field8",
            header : {
                text: "영어"
            },
            width: 80
        },
        {
            name: "col9",
            fieldName: "field9",
            header : {
                text: "과학"
            },
            width: 80
        },
        {
            name: "col10",
            fieldName: "field10",
            header : {
                text: "사회"
            },
            width: 80
        }
    ];
    //컬럼을 GridView에 입력 합니다.
    gridView.setColumns(columns);

    var data = [
        ["배우", "여자", "전도연", "20", "22", "90", "70", "60", "100", "80"],
        ["가수", "여자", "이선희", "40", "33", "90", "70", "60", "100", "80"],
        ["배우", "여자", "하지원", "10", "11", "90", "70", "60", "100", "80"],
        ["가수", "여자", "박정현", "40", "22", "90", "70", "60", "100", "80"],
        ["배우", "여자", "전지현", "20", "44", "90", "70", "60", "100", "80"]
    ];
    dataProvider.setRows(data);

    //복원지점 저장
    $("#btnSavePoint").click(function () {
        gridView.cancel();
        dataProvider.savePoint();
        refreshPoints();
    });

    //선택한 복원지점으로 복원
    $("#btnRollback").click(function () {
        var point = $("#listPoints").val();
     
        gridView.cancel();
        dataProvider.rollback(point); // point를 생략하면 최초 복제로 복원
        refreshPoints();
    });

    //설정된 모든 복원지점을 삭제
    $("#btnClearSavePoints").click(function () {
        dataProvider.clearSavePoints();
        refreshPoints();
    });

    function refreshPoints() {
        var points = dataProvider.getSavePoints();
        var list = $("#listPoints");
     
        list.empty();
        $.map(points, function (c) {
            $("
HTML
1. <button type="button" class="btn btn-primary btn-xs" id="btnSavePoint">복원지점 만들기</button> 

2. 그리드의 값을 입력/수정/삭제 합니다.

3. 1,2번을 반복하여 몇 건의 복원지점을 만듭니다.

3. savePoints: <select id="listPoints" style="min-width:80px"></select><br/>
 <button type="button" class="btn btn-primary btn-xs" id="btnRollback">수정된 RealGrid값을 해당 시점으로 복원하기</button> 버튼을 클릭하여 그리드 데이터들이 복원됐는지 확인하세요.  

4. <button type="button" class="btn btn-primary btn-xs" id="btnClearSavePoints">복제된 데이터 셋 삭제하기</button> 모든 복원 지점이 삭제됐는지 확인하세요.     

<div id="realgrid" style="width: 100%; height: 200px;"></div>

관련 데모 페이지


API 참조