RealGrid HELPC6 데이터 복원하기 - I 지정한 행만 원래 데이터로 방법
들어가며
이번 강좌에서는 RealGrid의 수정된 데이터를 원래 값으로 복원하는 방법을 배워보겠습니다.
이론
RealGrid의 복원 방법은 크게 2가지 방법이 있습니다.
1. 지정한 행만 원래 값으로 복원하기
2. 특정시점으로 그리드 전체를 되돌리기
이번 강좌에서는 1. 지정한 행만 원래 값으로 복원하기에 대해 알아보고 2. 특정시점으로 그리드 전체를 되돌리기는 다음 강좌에서 알아보겠습니다.
지정한 행만 원래 값으로 복원하는 방법은 매우 간단합니다.
- DataProvider.setOptions()함수를 사용하여 DataProvider에 복원모드를 지정하고
- DataProvider.restoreUpdatedRows()함수를 사용하여 지정한 행을 복원하면 됩니다.
복원 모드(RestoreMode)
DataProvider의 복원모드는 아래와 같이 3가지 속성이 있습니다.
- NONE - 복원모드를 사용하지 않는다.
- EXPLICIT - 명시적으로 복원명령을 실행했을 경우에만 복원
- AUTO - 수정된 값이 원래값과 같을 경우 자동으로 복원
DataProvider에 복원모드를 지정하는 방법
DataProvider에 복원모드를 지정 하려면 DataProvider.setOptions()함수를 사용합니다. 첫 번째 인자인 DataProviderOptions의 속성중 restoreMode에 복원모드를 지정하면 됩니다.
유의사항
복원모드는 그리드를 처음 설정하는 부분에서 설정해주세요. 값의 수정이 일어난 후(RowState가 변경된 후) 복원모드를 지정한 경우 RowState가 이미 변경된 행은 복원모드가 동작하지 않습니다.
실습
실습에서는 복원모드 설정에 따라 실제로 어떻게 복원되는지 확인해 보도록 하겠습니다.
-
버튼을 클릭하면 setOptions()을 사용하여 dataProvider에 restoreMode: “explicit”를 적용합니다.
//복구모드: explicit 지정 $("#btnSetRestoreMode1").click(function () { dataProvider.setOptions({ restoreMode: "explicit" }); }); -
값을 수정하여 RowState가 변경되도록 합니다.
-
버튼을 클릭하면 수정되었던 데이터들이 복원 됩니다.
var rows = [0,1,2,3,4]; dataProvider.restoreUpdatedRows(rows); }); -
버튼을 클릭하면 setOptions()을 사용하여 dataProvider에 restoreMode: “auto”를 적용합니다.
//복구모드: auto 지정 $("#btnSetRestoreMode2").click(function () { dataProvider.setOptions({ restoreMode: "auto" }); }); -
값을 수정하여 RowState가 변경되도록 합니다.
-
수정한 값을 원래대로 수정하면 RowState가 원래대로 변경되는지 확인 합니다.
실행화면
-
값을 수정하여 RowState가 변경되도록 합니다.
-
버튼을 클릭하여 그리드 데이터들이 복원됐는지 확인하세요.
-
값을 수정하여 RowState가 변경되도록 하세요.
-
수정한 값을 원래대로 수정하여 RowState가 원래대로 복원되는지 확인하세요.
전체 소스코드
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 = [
["가수", "여자", "정수라", "80", "99", "90", "90", "100", "100", "90"],
["배우", "여자", "송윤아", "10", "33", "90", "70", "60", "100", "80"],
["배우", "여자", "전도연", "20", "22", "90", "70", "60", "100", "80"],
["가수", "여자", "이선희", "40", "33", "90", "70", "60", "100", "80"],
["배우", "여자", "하지원", "10", "11", "90", "70", "60", "100", "80"],
["가수", "여자", "소찬휘", "30", "55", "90", "70", "60", "100", "80"],
["가수", "여자", "박정현", "40", "22", "90", "70", "60", "100", "80"],
["배우", "여자", "전지현", "20", "44", "90", "70", "60", "100", "80"]
];
dataProvider.setRows(data);
//복구모드: explicit 지정
$("#btnSetRestoreMode1").click(function () {
dataProvider.setOptions({
restoreMode: "explicit"
});
});
//body영역의 다이나믹 스타일 제거
$("#btnRestoreUpdatedRows").click(function () {
var rows = [0,1,2,3,4];
dataProvider.restoreUpdatedRows(rows);
});
//복구모드: auto 지정
$("#btnSetRestoreMode2").click(function () {
dataProvider.setOptions({
restoreMode: "auto"
});
});
});
</script>
HTML
1. <button type="button" class="btn btn-primary btn-xs" id="btnSetRestoreMode1">dataProvider에 복구모드: "explicit" 지정하기</button> 2. 값을 수정하여 RowState가 변경되도록 합니다. 3. <button type="button" class="btn btn-primary btn-xs" id="btnRestoreUpdatedRows">수정된 RealGrid값을 복원하기</button> 버튼을 클릭하여 그리드 데이터들이 복원됐는지 확인하세요. 4. <button type="button" class="btn btn-primary btn-xs" id="btnSetRestoreMode2">dataProvider에 복구모드: "auto" 지정하기</button> 5. 값을 수정하여 RowState가 변경되도록 하세요. 6. 수정한 값을 원래대로 수정하여 RowState가 원래대로 복원되는지 확인하세요. <div id="realgrid" style="width: 100%; height: 200px;"></div>
참조